|
@@ -5,7 +5,7 @@
|
|
|
<div class="common-title-box">
|
|
|
<h3><i class="el-icon-arrow-left" @click="$router.go(-1)"></i>栏目模板</h3>
|
|
|
<div class="btn-box">
|
|
|
- <el-button type="primary" size="small" @click="handleEdit">创建模板</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleEdit()">创建模板</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="search-box">
|
|
@@ -154,14 +154,57 @@
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
- :visible.sync="resourceFlag"
|
|
|
+ :visible.sync="channelFlag"
|
|
|
:show-close="true"
|
|
|
:close-on-click-modal="false"
|
|
|
:modal-append-to-body="false"
|
|
|
width="484px"
|
|
|
class="login-dialog"
|
|
|
- v-if="resourceFlag">
|
|
|
-
|
|
|
+ v-if="channelFlag">
|
|
|
+ <div class="channel-header">
|
|
|
+ {{channelForm.id?'编辑模板':'创建模版'}}
|
|
|
+ </div>
|
|
|
+ <el-form :model="channelForm" :rules="rulesChannelForm" ref="channelForm" label-width="100px" class="channelForm">
|
|
|
+ <el-form-item label="模板名称" prop="tpl_name">
|
|
|
+ <el-input v-model="channelForm.tpl_name" placeholder="请输入模板名称" @blur="handleTrim('channelForm','tpl_name')" ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学段" prop="study_phase">
|
|
|
+ <el-select v-model="channelForm.study_phase" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in $studyType"
|
|
|
+ :key="item.study_phase"
|
|
|
+ :label="item.study_phase_name"
|
|
|
+ :value="item.study_phase">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="栏目" prop="chn_data_str">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入栏目"
|
|
|
+ v-model="channelForm.chn_data_str"
|
|
|
+ @blur="handleChn"
|
|
|
+ show-word-limit>
|
|
|
+ </el-input>
|
|
|
+ <p class="tips">请按一行一个栏目进行输入</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="说明" prop="tpl_note">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入说明"
|
|
|
+ v-model="channelForm.tpl_note"
|
|
|
+ @blur="handleTrim('channelForm','tpl_note')"
|
|
|
+ maxlength="50"
|
|
|
+ show-word-limit>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit('channelForm')" size="small" :loading="loading">保存</el-button>
|
|
|
+ <el-button @click="onCancel('channelForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -216,13 +259,26 @@ export default {
|
|
|
tableHeight: "", // 表格高度
|
|
|
total_count: 0,
|
|
|
channelForm:{
|
|
|
+ id: '',
|
|
|
tpl_name: '',
|
|
|
- study_phase: null,
|
|
|
+ study_phase: '',
|
|
|
chn_data_str:'',
|
|
|
chn_data: [],
|
|
|
tpl_note: ''
|
|
|
},
|
|
|
- channel
|
|
|
+ rulesChannelForm:{
|
|
|
+ tpl_name:[
|
|
|
+ { required: true, message: '请输入模板名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ study_phase: [
|
|
|
+ { required: true, message: '请选择学段', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ chn_data_str: [
|
|
|
+ { required: true, message: '请输入栏目', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ channelFlag: false,
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -234,7 +290,20 @@ export default {
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
handleEdit(row){
|
|
|
- this.resourceFlag = true
|
|
|
+ this.channelFlag = true
|
|
|
+ if(row){
|
|
|
+ this.channelForm.id = row.id
|
|
|
+ this.getInfo()
|
|
|
+ }else{
|
|
|
+ this.channelForm ={
|
|
|
+ id: '',
|
|
|
+ tpl_name: '',
|
|
|
+ study_phase: '',
|
|
|
+ chn_data_str:'',
|
|
|
+ chn_data: [],
|
|
|
+ tpl_note: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
getList(val){
|
|
|
if(val){
|
|
@@ -276,7 +345,7 @@ export default {
|
|
|
},
|
|
|
//计算table高度(动态设置table高度)
|
|
|
getTableHeight() {
|
|
|
- let tableH = 370; //距离页面下方的高度
|
|
|
+ let tableH = 300; //距离页面下方的高度
|
|
|
let tableHeightDetil = window.innerHeight - tableH;
|
|
|
if (tableHeightDetil <= 300) {
|
|
|
this.tableHeight = 300;
|
|
@@ -361,6 +430,71 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ handleChn(){
|
|
|
+ this.channelForm.chn_data_str = this.channelForm.chn_data_str.trim()
|
|
|
+ this.channelForm.chn_data = this.channelForm.chn_data_str.split("\n")
|
|
|
+ },
|
|
|
+ // 提交表单
|
|
|
+ onSubmit(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/PaperServer/Manager/ChannelTplManager/AddChannelTpl";
|
|
|
+ if(this.channelForm.id){
|
|
|
+ MethodName = "/PaperServer/Manager/ChannelTplManager/EditChannelTpl";
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ id: this.channelForm.id,
|
|
|
+ tpl_name: this.channelForm.tpl_name,
|
|
|
+ study_phase: this.channelForm.study_phase,
|
|
|
+ tpl_status: 0,
|
|
|
+ chn_data: this.channelForm.chn_data,
|
|
|
+ tpl_note: this.channelForm.tpl_note
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ if(res.status===1){
|
|
|
+ this.$message.success("保存成功")
|
|
|
+ this.$refs['channelForm'].resetFields();
|
|
|
+ this.channelFlag = false
|
|
|
+ this.getList(1)
|
|
|
+ }
|
|
|
+ }).catch((res) =>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel(formName){
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // 获取信息
|
|
|
+ getInfo(){
|
|
|
+ let MethodName = "/PaperServer/Manager/ChannelTplManager/FindChannelTplById";
|
|
|
+ let data = {
|
|
|
+ id: this.channelForm.id
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.channelForm.tpl_name = JSON.parse(JSON.stringify(res.data.tpl_name))
|
|
|
+ this.channelForm.study_phase = JSON.parse(JSON.stringify(res.data.study_phase))
|
|
|
+ this.channelForm.chn_data_str = JSON.parse(JSON.stringify(res.data.chn_data.join("\n")))
|
|
|
+ this.channelForm.tpl_note = JSON.parse(JSON.stringify(res.data.tpl_note))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -391,6 +525,7 @@ export default {
|
|
|
/* @import url(); 引入css类 */
|
|
|
.manage-root-contain{
|
|
|
width: 1192px;
|
|
|
+ height: calc(100vh - 84px);
|
|
|
margin: 16px auto;
|
|
|
border-radius: 4px;
|
|
|
background: #FFF;
|
|
@@ -422,4 +557,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.channel-header{
|
|
|
+ border-bottom: 1px solid #E5E6EB;
|
|
|
+ padding: 12px 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1D2129;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+.tips{
|
|
|
+ margin: 0;
|
|
|
+ color: #86909C;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
</style>
|