Skip to content

E
ElectricitySheep
Commit 88df9a35 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent beba4f9b
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 124 deletions
src/components/StoreDesign/special.vue
View file @ 88df9a35
...@@ -10,34 +10,35 @@ ...@@ -10,34 +10,35 @@
</div> </div>
<div class="content"> <div class="content">
<div> <div>
<el-select size="small" class="w150"> <el-select size="small" class="w150" v-model="msg.TopicTypeId">
<el-option label="全部专题" :value="0"></el-option> <el-option label="全部专题" :value="0"></el-option>
<el-option v-for="item in TypeList" :key="item.Id" :label="item.TopicName" :value="item.Id">
</el-option>
</el-select> </el-select>
<div class="searchInput"> <div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.Title"
v-model="msg.NavIconName" size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()"> size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
</el-input> </el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px" <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
@click="msg.pageIndex=1,getList()"> </span> @click="msg.pageIndex=1,getList()"> </span>
</div> </div>
</div> </div>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0"> <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="ID" label="ID" width="100"> <el-table-column prop="Id" label="ID" width="100">
</el-table-column> </el-table-column>
<el-table-column prop="fenlei" label="分类" width="120"> <el-table-column prop="TopicName" label="分类" width="120">
</el-table-column> </el-table-column>
<el-table-column prop="zhuanti" label="专题"> <el-table-column prop="Title" label="专题">
</el-table-column> </el-table-column>
<el-table-column prop="bujufangshi" label="布局方式" width="120"> <el-table-column prop="FlexTypeStr" label="布局方式" width="120">
</el-table-column> </el-table-column>
<el-table-column prop="shifoujingxuan" label="是否精选" width="100"> <el-table-column prop="IsChoiceStr" label="是否精选" width="100">
</el-table-column> </el-table-column>
<el-table-column prop="sort" label="排序" width="200"> <el-table-column prop="SortNum" label="排序" width="200">
</el-table-column> </el-table-column>
<el-table-column label="操作" width="150"> <el-table-column label="操作" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt=""> <img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
<img @click="upPwddialog=true" style="margin:0 10px;" src="../../assets/img/userman/change.png" alt="">
<img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt=""> <img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt="">
</template> </template>
</el-table-column> </el-table-column>
...@@ -55,78 +56,78 @@ ...@@ -55,78 +56,78 @@
<div class="content"> <div class="content">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="基础设置" name="first"> <el-tab-pane label="基础设置" name="first">
<div class="contentTwo"> <div class="contentTwo">
<el-form label-width="10rem"> <el-form label-width="10rem">
<el-form-item label="标题"> <el-form-item label="标题">
<el-input type="text" maxlength="100" size="small"></el-input> <el-input type="text" maxlength="100" size="small" v-model="addMsg.Title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="专题列表布局方式"> <el-form-item label="专题列表布局方式">
<el-radio-group v-model="addMsg.flexType"> <el-radio-group v-model="addMsg.FlexType">
<el-radio :label="1">小图模式</el-radio> <el-radio :label="1">小图模式</el-radio>
<el-radio :label="2">大图模式</el-radio> <el-radio :label="2">大图模式</el-radio>
<el-radio :label="3">多图模式</el-radio> <el-radio :label="3">多图模式</el-radio>
</el-radio-group> </el-radio-group>
<div class="flexTypeList"> <div class="flexTypeList">
小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片 小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
</div>
</el-form-item>
<el-form-item label="封面图">
<el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.coverImg) + ')'}">
<i v-if="addMsg.coverImg==''" class="el-icon-picture-outline"></i>
</div> </div>
</div> </el-form-item>
</el-form-item> <el-form-item label="封面图">
<el-form-item> <el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
<span slot="label">摘要</span> <el-button size="mini" @click="choicImg=true">选择图片</el-button>
<el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top"> </el-tooltip>
<i class="el-icon-info"></i> <div class="customize-share-title">
</el-tooltip> <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
<el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input> :style="{backgroundImage:'url(' + getIconLink(addMsg.CoverImg) + ')'}">
</el-form-item> <i v-if="addMsg.CoverImg==''" class="el-icon-picture-outline"></i>
<el-form-item label="自定义分享标题"> </div>
<el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
</el-form-item>
<el-form-item label="自定义分享图片">
<el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.customImg) + ')'}">
<i v-if="addMsg.customImg==''" class="el-icon-picture-outline"></i>
</div> </div>
</div> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item label="是否精选"> <span slot="label">摘要</span>
<el-switch v-model="addMsg.isJingxuan" :active-value="1" :inactive-value="0"></el-switch> <el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top">
</el-form-item> <i class="el-icon-info"></i>
<el-form-item label="分类"> </el-tooltip>
<el-select v-model="addMsg.fenlei" size="small"> <el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input>
<!-- <el-option </el-form-item>
v-for="item in options" <el-form-item label="自定义分享标题">
:key="item.value" <el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
:label="item.label" </el-form-item>
:value="item.value"> <el-form-item label="自定义分享图片">
</el-option> --> <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
</el-select> <el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-form-item> </el-tooltip>
<el-form-item> <div class="customize-share-title">
<span slot="label">虚拟阅读量</span> <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
<el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top"> :style="{backgroundImage:'url(' + getIconLink(addMsg.CustomImg) + ')'}">
<i class="el-icon-info"></i> <i v-if="addMsg.CustomImg==''" class="el-icon-picture-outline"></i>
</el-tooltip> </div>
<el-input type="text" size="small" v-model="addMsg.yuedu"></el-input> </div>
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="是否精选">
<el-input type="text" size="small" v-model="addMsg.sort"></el-input> <el-switch v-model="addMsg.IsChoice" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item> </el-form-item>
</el-form> <el-form-item label="分类">
</div> <el-select v-model="addMsg.TopicTypeId" size="small">
<el-option :key="0" label="请选择" :value="0">
</el-option>
<el-option v-for="item in TypeList" :key="item.Id" :label="item.TopicName" :value="item.Id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<span slot="label">虚拟阅读量</span>
<el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
<el-input type="text" size="small" v-model="addMsg.ReadNum"
@keyup.native="checkInteger(addMsg,'ReadNum')" maxlength="8"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" size="small" v-model="addMsg.SortNum"
@keyup.native="checkInteger(addMsg,'SortNum')" maxlength="2"></el-input>
</el-form-item>
</el-form>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="详情设置" name="second"> <el-tab-pane label="详情设置" name="second">
<div style="position: relative; margin-bottom: 10px; height: 621px;"> <div style="position: relative; margin-bottom: 10px; height: 621px;">
...@@ -196,18 +197,14 @@ ...@@ -196,18 +197,14 @@
return { return {
loading: false, loading: false,
activeName: 'first', activeName: 'first',
pluginData:[], pluginData: [],
dataList: [{ TypeList: [], //分类列表
ID: 699, dataList: [],
fenlei: '李四',
zhuanti: 'ck',
bujufangshi: '2020-10-25',
shifoujingxuan: '是',
sort: 1
}],
msg: { msg: {
pageIndex: 1, pageIndex: 1,
pageSize: 15, pageSize: 15,
TopicTypeId: 0,
Title: "",
}, },
pwdMsg: { pwdMsg: {
password: '' password: ''
...@@ -215,16 +212,18 @@ ...@@ -215,16 +212,18 @@
total: 0, total: 0,
speciaIsShowAdd: true, speciaIsShowAdd: true,
addMsg: { addMsg: {
title: '', //标题 Id: 0,
flexType: 1, //专题列表布局方式 Title: '', //标题
coverImg: '', //封面图 FlexType: 1, //专题列表布局方式
CoverImg: '', //封面图
Abstract: '', //摘要 Abstract: '', //摘要
CustomTitle: '', //自定义分享标题 CustomTitle: '', //自定义分享标题
customImg: '', //自定义分享图片 CustomImg: '', //自定义分享图片
isJingxuan: 0, //是否精选 IsChoice: 0, //是否精选
fenlei: 0, //分类 TopicTypeId: 0, //分类
yuedu: '', //虚拟阅读量 ReadNum: 0, //虚拟阅读量
sort: '' //排序 SortNum: 0, //排序
ComponentDataList: [], //插件
}, },
rules: { rules: {
RoleName: [{ RoleName: [{
...@@ -244,7 +243,7 @@ ...@@ -244,7 +243,7 @@
this.getList(); this.getList();
}, },
getList() { getList() {
this.apipost("/api/Employee/GetRolePageList", this.msg, res => { this.apipost("/api/MContent/GetTopicPageList", this.msg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData; this.dataList = res.data.data.pageData;
this.total = res.data.data.count; this.total = res.data.data.count;
...@@ -255,23 +254,25 @@ ...@@ -255,23 +254,25 @@
}, },
submitform(addMsg) { submitform(addMsg) {
//提交创建、修改表单 //提交创建、修改表单
this.$refs[addMsg].validate(valid => { // this.$refs[addMsg].validate(valid => {
if (valid) { // if (valid) {
this.saveMsg();
} else { // } else {
return false; // return false;
} // }
}); // });
this.saveMsg();
}, },
//保存 //保存
saveMsg() { saveMsg() {
var ckedKeys = this.$refs.tree.getCheckedKeys(); this.addMsg.ComponentDataList = this.pluginData;
this.addMsg.RoleAuth = ckedKeys.join(','); this.apipost("/api/MContent/SetTopic", this.addMsg, res => {
this.apipost("/api/Employee/SetRole", this.addMsg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.getList(); this.getList();
this.clearInfo(); this.clearInfo();
this.speciaIsShowAdd = true; this.speciaIsShowAdd = true;
this.Success(res.data.message);
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
...@@ -279,23 +280,39 @@ ...@@ -279,23 +280,39 @@
}, },
//清空 //清空
clearInfo() { clearInfo() {
this.addMsg.RoleId = 0; this.addMsg.Id = 0;
this.addMsg.RoleName = ''; this.addMsg.Title = '';
this.addMsg.RoleIntro = ''; this.addMsg.FlexType = 1;
this.addMsg.RoleAuth = ''; this.addMsg.CoverImg = '';
this.addMsg.Abstract = '';
this.addMsg.CustomTitle = '';
this.addMsg.CustomImg = '';
this.addMsg.IsChoice = 0;
this.addMsg.TopicTypeId = 0;
this.addMsg.ReadNum = 0;
this.addMsg.SortNum = 0;
this.addMsg.ComponentDataList = [];
}, },
//修改 //修改
EditRole(item) { EditRole(item) {
this.apipost("/api/Employee/GetRole", { this.apipost("/api/MContent/GetTopic", {
RoleId: item.RoleId Id: item.Id
}, res => { }, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.addMsg = res.data.data; var jsonData = res.data.data;
this.addMsg.Id = jsonData.Id;
this.addMsg.Title = jsonData.Title;
this.addMsg.FlexType = jsonData.FlexType;
this.addMsg.CoverImg = jsonData.CoverImg;
this.addMsg.Abstract = jsonData.Abstract;
this.addMsg.CustomTitle = jsonData.CustomTitle;
this.addMsg.CustomImg = jsonData.CustomImg;
this.addMsg.IsChoice = jsonData.IsChoice;
this.addMsg.TopicTypeId = jsonData.TopicTypeId;
this.addMsg.ReadNum = jsonData.ReadNum;
this.addMsg.SortNum = jsonData.SortNum;
this.addMsg.ComponentDataList = jsonData.ComponentDataList;
this.speciaIsShowAdd = false; this.speciaIsShowAdd = false;
let newArr = this.addMsg.RoleAuth.split(',');
setTimeout(() => {
this.$refs.tree.setCheckedKeys(newArr);
}, 10)
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
...@@ -305,8 +322,8 @@ ...@@ -305,8 +322,8 @@
RemmoveRole(item) { RemmoveRole(item) {
var that = this; var that = this;
that.Confirm("是否要删除?", function () { that.Confirm("是否要删除?", function () {
that.apipost("/api/Employee/RemoveRole", { that.apipost("/api/MContent/RemoveRole", {
RoleId: item.RoleId Id: item.Id
}, res => { }, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
that.getList(); that.getList();
...@@ -389,9 +406,20 @@ ...@@ -389,9 +406,20 @@
}) })
item.isCked = true; item.isCked = true;
}, },
getTypeList() {
this.apipost("/api/MContent/GetTopicTypeList", {}, res => {
if (res.data.resultCode == 1) {
this.TypeList = res.data.data;
} else {
this.Info(res.data.message);
}
})
}
}, },
mounted() { mounted() {
//this.getList(); this.getTypeList();
this.getList();
} }
}; };
...@@ -512,7 +540,8 @@ ...@@ -512,7 +540,8 @@
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
background: #f5f7f9; background: #f5f7f9;
} }
.diy-component-options .el-button {
.diy-component-options .el-button {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
width: 25px; width: 25px;
...@@ -522,7 +551,8 @@ ...@@ -522,7 +551,8 @@
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
margin-left: 0; margin-left: 0;
} }
.diy-component-preview { .diy-component-preview {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -555,4 +585,5 @@ ...@@ -555,4 +585,5 @@
right: -2px; right: -2px;
width: calc(100% + 4px); width: calc(100% + 4px);
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment