|  | @@ -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>
 |