master V1.0.2
yujialong 4 months ago
parent 90d413f410
commit f1fa775531
  1. 2
      src/components/editor.js
  2. 404
      src/pages/column/add/index.vue
  3. 4
      src/pages/column/page/contactUs.vue

@ -371,7 +371,7 @@ export default {
editor.on('init', function (ed) { editor.on('init', function (ed) {
// 设置默认字体(新增才需要设置) // 设置默认字体(新增才需要设置)
if (editor.iframeElement.contentWindow.document.body.innerText === '\n') { if (editor.iframeElement.contentWindow.document.body.innerText === '\n') {
ed.target.editorCommands.execCommand("fontName", false, "Microsoft Yahei") ed.target.editorCommands.execCommand("fontName", false, "Harmony")
ed.target.editorCommands.execCommand("fontSize", false, "19px") ed.target.editorCommands.execCommand("fontSize", false, "19px")
ed.target.editorCommands.execCommand("lineHeight", false, "1.5") ed.target.editorCommands.execCommand("lineHeight", false, "1.5")
} }

@ -1,136 +1,81 @@
<template> <template>
<div class="page" <div class="page" v-show="loaded">
v-show="loaded">
<p class="page-name mb">栏目</p> <p class="page-name mb">栏目</p>
<el-form :model="form" <el-form :model="form" :rules="rules" class="input-form model" label-width="120px">
:rules="rules"
class="input-form model"
label-width="120px">
<div class="item-line"> <div class="item-line">
<el-form-item prop="columnName" <el-form-item prop="columnName" label="栏目名称">
label="栏目名称"> <el-input placeholder="请输入栏目名称" v-model="form.columnName" clearable maxlength="40"
<el-input placeholder="请输入栏目名称" @input="nameChange"></el-input>
v-model="form.columnName"
clearable
maxlength="40"
@input="nameChange"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="fatherId" <el-form-item prop="fatherId" label="设置上级">
label="设置上级"> <el-cascader ref="fatherId" v-model="form.fatherId" :options="columns" :props="columnProps" clearable
<el-cascader ref="fatherId" @change="fatherIdChange"></el-cascader>
v-model="form.fatherId"
:options="columns"
:props="columnProps"
clearable
@change="fatherIdChange"></el-cascader>
</el-form-item> </el-form-item>
</div> </div>
<div class="item-line"> <div class="item-line">
<el-form-item prop="typeId" <el-form-item prop="typeId" label="栏目类型">
label="栏目类型"> <el-select v-model="form.typeId" @change="typeChange">
<el-select v-model="form.typeId" <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
@change="typeChange">
<el-option v-for="item in types"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="pageSize" <el-form-item prop="pageSize" label="分页条数">
label="分页条数"> <el-input-number v-model="form.pageSize" :min="0" class="auto"></el-input-number>
<el-input-number v-model="form.pageSize"
:min="0"
class="auto"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item prop="menuVisible" <el-form-item prop="menuVisible" label="导航菜单可见">
label="导航菜单可见"> <el-switch v-model="form.menuVisible" :active-value="0" :inactive-value="1">
<el-switch v-model="form.menuVisible"
:active-value="0"
:inactive-value="1">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
</div> </div>
<div class="line"></div> <div class="line"></div>
<template v-if="form.typeId === 1 || form.typeId === 4"> <template v-if="form.typeId === 1 || form.typeId === 4">
<el-form-item prop="columnBanner" <el-form-item prop="columnBanner" label="栏目Banner">
label="栏目Banner"> <el-upload class="avatar-uploader avatar-uploader-lg" accept=".jpg,.png,.jpeg,.gif" :on-change="changeFile"
<el-upload class="avatar-uploader avatar-uploader-lg" :show-file-list="false" :action="this.api.upload" :auto-upload="false">
accept=".jpg,.png,.jpeg,.gif" <img v-if="form.columnBanner" :src="form.columnBanner" class="avatar-lg">
:on-change="changeFile" <div class="uploader-default" v-else>
:show-file-list="false" <img class="plus" src="@/assets/images/plus.png" alt="">
:action="this.api.upload"
:auto-upload="false">
<img v-if="form.columnBanner"
:src="form.columnBanner"
class="avatar-lg">
<div class="uploader-default"
v-else>
<img class="plus"
src="@/assets/images/plus.png"
alt="">
<p>点击上传</p> <p>点击上传</p>
</div> </div>
<div slot="tip" <div slot="tip" class="el-upload__tip">
class="el-upload__tip">
<p>请上传1920x500PX5M以内的jpgbmppng格式</p> <p>请上传1920x500PX5M以内的jpgbmppng格式</p>
</div> </div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item prop="subtitle" <el-form-item prop="subtitle" label="栏目副标题">
label="栏目副标题"> <el-input type="textarea" placeholder="请输入栏目副标题" v-model="form.subtitle"></el-input>
<el-input type="textarea"
placeholder="请输入栏目副标题"
v-model="form.subtitle"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="templateId" <el-form-item prop="templateId" label="栏目模板">
label="栏目模板"> <el-select v-model="form.templateId" @change="getStyle">
<el-select v-model="form.templateId" <el-option v-for="item in templates" :key="item.id" :label="item.templateType" :value="item.id">
@change="getStyle">
<el-option v-for="item in templates"
:key="item.id"
:label="item.templateType"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="listStyleId" <el-form-item prop="listStyleId" label="列表样式">
label="列表样式">
<ul class="styles"> <ul class="styles">
<li v-for="(item, i) in listStyle" <li v-for="(item, i) in listStyle" :key="i" @click="form.listStyleId = item.id">
:key="i"
@click="form.listStyleId = item.id">
<div class="review"> <div class="review">
<img style="width: 90px;max-height: 110px;" <img style="width: 90px;max-height: 110px;" :src="require('@/assets/images/style/' + item.id + '.png')"
:src="require('@/assets/images/style/' + item.id + '.png')" alt="">
alt="">
</div> </div>
<el-radio v-model="form.listStyleId" <el-radio v-model="form.listStyleId" :label="item.id">{{ item.style }}</el-radio>
:label="item.id">{{ item.style }}</el-radio>
</li> </li>
</ul> </ul>
</el-form-item> </el-form-item>
<el-form-item v-if="form.listStyleId != 73 && form.listStyleId != 74" <el-form-item v-if="form.listStyleId != 73 && form.listStyleId != 74" prop="detailStyleId" label="详情样式">
prop="detailStyleId"
label="详情样式">
<ul class="styles"> <ul class="styles">
<li v-for="(item, i) in detailStyleId" <li v-for="(item, i) in detailStyleId" :key="i" @click="form.detailStyleId = item.id">
:key="i"
@click="form.detailStyleId = item.id">
<div class="review"> <div class="review">
<img :style="{width: item.id == 24 ? '50px' : '90px', 'max-height': '110px'}" <img :style="{ width: item.id == 24 ? '50px' : '90px', 'max-height': '110px' }"
:src="require('@/assets/images/style/' + item.id + '.png')" :src="require('@/assets/images/style/' + item.id + '.png')" alt="">
alt="">
</div> </div>
<el-radio v-model="form.detailStyleId" <el-radio v-model="form.detailStyleId" :label="item.id">{{ item.style }}</el-radio>
:label="item.id">{{ item.style }}</el-radio>
</li> </li>
</ul> </ul>
</el-form-item> </el-form-item>
</template> </template>
<template v-if="form.typeId === 2"> <template v-if="form.typeId === 2">
<el-form-item prop="connectionType" <el-form-item prop="connectionType" label="连接类型">
label="连接类型">
<el-radio-group v-model="form.connectionType"> <el-radio-group v-model="form.connectionType">
<el-radio :label="1">站内链接</el-radio> <el-radio :label="1">站内链接</el-radio>
<el-radio :label="2">站外链接</el-radio> <el-radio :label="2">站外链接</el-radio>
@ -139,89 +84,56 @@
</el-form-item> </el-form-item>
<template v-if="form.connectionType === 1"> <template v-if="form.connectionType === 1">
<el-form-item label="站内链接"> <el-form-item label="站内链接">
<el-cascader v-model="links" <el-cascader v-model="links" :options="columns" :props="columnProps" clearable
:options="columns" @change="getArticle"></el-cascader>
:props="columnProps"
clearable
@change="getArticle"></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="文章"> <el-form-item label="文章">
<el-select v-model="article" <el-select v-model="article" clearable>
clearable> <el-option v-for="item in articles" :key="item.id" :label="item.title" :value="item.id">
<el-option v-for="item in articles"
:key="item.id"
:label="item.title"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<el-form-item v-show="form.connectionType === 2" <el-form-item v-show="form.connectionType === 2" prop="linkAddress" label="站外链接">
prop="linkAddress" <el-input placeholder="请输入站外链接" v-model.trim="form.linkAddress" clearable></el-input>
label="站外链接">
<el-input placeholder="请输入站外链接"
v-model.trim="form.linkAddress"
clearable></el-input>
</el-form-item> </el-form-item>
<template v-if="form.connectionType === 3"> <template v-if="form.connectionType === 3">
<el-form-item prop="siteSelection" <el-form-item prop="siteSelection" label="站点选择">
label="站点选择"> <el-select v-model="form.siteSelection" @change="getOtherColumn">
<el-select v-model="form.siteSelection" <el-option v-for="item in sites" :key="item.id" :label="item.siteName" :value="item.id">
@change="getOtherColumn">
<el-option v-for="item in sites"
:key="item.id"
:label="item.siteName"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="栏目"> <el-form-item label="栏目">
<el-cascader v-model="otherLink" <el-cascader v-model="otherLink" :options="otherColumns" :props="columnProps" clearable
:options="otherColumns" @change="getArticle"></el-cascader>
:props="columnProps"
clearable
@change="getArticle"></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="文章"> <el-form-item label="文章">
<el-select v-model="otherArticle" <el-select v-model="otherArticle" clearable>
clearable> <el-option v-for="item in otherArticles" :key="item.id" :label="item.title" :value="item.id">
<el-option v-for="item in otherArticles"
:key="item.id"
:label="item.title"
:value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<el-form-item prop="isOpen" <el-form-item prop="isOpen" label="新窗口打开">
label="新窗口打开"> <el-switch v-model="form.isOpen" :active-value="1" :inactive-value="0">
<el-switch v-model="form.isOpen"
:active-value="1"
:inactive-value="0">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
</template> </template>
<template v-if="form.typeId === 3"> <template v-if="form.typeId === 3">
<el-form-item prop="templateId" <el-form-item prop="templateId" label="栏目模板">
label="栏目模板">
<el-select v-model="form.templateId"> <el-select v-model="form.templateId">
<el-option label="长页模板" <el-option label="长页模板" :value="9">
:value="9">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="listStyleId" <el-form-item prop="listStyleId" label="列表样式">
label="列表样式"> <ul :class="['styles', { disabled: isEdit }]">
<ul class="styles"> <li v-for="(item, i) in pageStyle" :key="i" @click="pageClick(item)">
<li v-for="(item, i) in pageStyle"
:key="i"
@click="form.listStyleId = item.id">
<div class="review"> <div class="review">
<img :src="require('@/assets/images/page/' + item.pic + '.png')" <img :src="require('@/assets/images/page/' + item.pic + '.png')" alt="">
alt="">
</div> </div>
<el-radio v-model="form.listStyleId" <el-radio v-model="form.listStyleId" :label="item.id" :disabled="isEdit">{{ item.style }}</el-radio>
:label="item.id">{{ item.style }}</el-radio>
</li> </li>
</ul> </ul>
</el-form-item> </el-form-item>
@ -235,21 +147,12 @@
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<div class="btns"> <div class="btns">
<el-button type="primary" <el-button type="primary" @click="submit(0)">确定</el-button>
@click="submit(0)">确定</el-button>
<el-button @click="$router.push('/column')">取消</el-button> <el-button @click="$router.push('/column')">取消</el-button>
</div> </div>
<!-- 剪裁组件弹窗 --> <!-- 剪裁组件弹窗 -->
<el-dialog title="图片裁剪" <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
append-to-body <Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="true" @upload="customUpload" />
:visible.sync="cropperModel"
width="1100px"
:close-on-click-modal="false">
<Cropper ref="cropper"
:img-file.sync="file"
:is-upload="isUpload"
:fixed="true"
@upload="customUpload" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -540,6 +443,10 @@ export default {
} }
}).catch(err => { }) }).catch(err => { })
}, },
//
pageClick (item) {
if (!this.isEdit) this.form.listStyleId = item.id
},
// //
getSite () { getSite () {
this.$post(this.api.site, { this.$post(this.api.site, {
@ -778,97 +685,118 @@ export default {
$upload-width: 220px; $upload-width: 220px;
$upload-height: 102px; $upload-height: 102px;
$upload-lg-height: 102px; $upload-lg-height: 102px;
/deep/ .avatar-uploader { /deep/ .avatar-uploader {
.el-upload { .el-upload {
position: relative; position: relative;
width: $upload-width; width: $upload-width;
height: $upload-height; height: $upload-height;
border: 1px solid #dcdee0; border: 1px solid #dcdee0;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
.uploader-default {
display: flex;
height: $upload-height;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #fafafa;
p {
margin-top: 10px;
font-size: 14px;
color: #333;
line-height: 20px;
}
}
}
&.avatar-uploader-lg {
.el-upload {
width: 100%;
max-width: 820px;
height: $upload-lg-height;
.uploader-default { .uploader-default {
height: $upload-lg-height; display: flex;
} height: $upload-height;
} flex-direction: column;
} justify-content: center;
.avatar { align-items: center;
display: block; text-align: center;
width: $upload-width; background: #fafafa;
height: $upload-height;
p {
margin-top: 10px;
font-size: 14px;
color: #333;
line-height: 20px;
}
} }
.avatar-lg { }
display: block;
width: 100%; &.avatar-uploader-lg {
.el-upload {
width: 100%;
max-width: 820px;
height: $upload-lg-height;
.uploader-default {
height: $upload-lg-height; height: $upload-lg-height;
}
} }
.el-upload__tip { }
margin-top: 0;
p { .avatar {
font-size: 12px; display: block;
color: #333; width: $upload-width;
} height: $upload-height;
}
.avatar-lg {
display: block;
width: 100%;
height: $upload-lg-height;
}
.el-upload__tip {
margin-top: 0;
p {
font-size: 12px;
color: #333;
} }
}
} }
.style-wrap { .style-wrap {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
.label {
margin-right: 30px; .label {
} margin-right: 30px;
}
} }
.styles { .styles {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
li {
width: 170px; li {
margin-right: 20px; width: 170px;
text-align: center; margin-right: 20px;
cursor: pointer; text-align: center;
&:hover .review { cursor: pointer;
border-color: #2962ff;
}
} }
.review {
display: flex; &:not(.disabled) {
justify-content: center; li:hover .review {
align-items: center; border-color: #2962ff;
width: 170px;
height: 112px;
margin-bottom: 10px;
border: 1px solid #dcdee0;
border-radius: 2px;
img {
width: 50px;
}
} }
.el-radio { }
white-space: normal;
.review {
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 112px;
margin-bottom: 10px;
border: 1px solid #dcdee0;
border-radius: 2px;
img {
width: 50px;
} }
}
.el-radio {
white-space: normal;
}
} }
/deep/.input-form .auto .el-input { /deep/.input-form .auto .el-input {
width: 119px; width: 119px;
} }
</style> </style>

@ -36,8 +36,8 @@
</div> </div>
<div class="c-wrap m-t-20"> <div class="c-wrap m-t-20">
<el-table :data="modules[3].list" class="patent-table" ref="table" stripe header-align="center"> <el-table :data="modules[3].list" class="patent-table" ref="table" stripe header-align="center">
<el-table-column prop="dep" label="部门" align="center" min-width="250"></el-table-column> <el-table-column prop="dep" label="部门" align="center" min-width="150"></el-table-column>
<el-table-column prop="contacts" label="联系人" align="center" min-width="100"></el-table-column> <!-- <el-table-column prop="contacts" label="联系人" align="center" min-width="100"></el-table-column> -->
<el-table-column prop="phone" label="电话" align="center" min-width="150"></el-table-column> <el-table-column prop="phone" label="电话" align="center" min-width="150"></el-table-column>
<el-table-column prop="email" label="邮箱" align="center" min-width="150"></el-table-column> <el-table-column prop="email" label="邮箱" align="center" min-width="150"></el-table-column>
</el-table> </el-table>

Loading…
Cancel
Save