Procházet zdrojové kódy

栏目创建、获取及编辑

natasha před 1 rokem
rodič
revize
d034ebb915

+ 158 - 8
src/views/content_manage/newspaper_manage/ChannelList.vue

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

+ 1 - 1
src/views/content_manage/newspaper_manage/index.vue

@@ -131,7 +131,7 @@
                     <el-table-column
                         fixed="right"
                         label="操作"
-                        width="220">
+                        width="150">
                         <template slot-scope="scope">
                             <el-button
                                 @click.native.prevent="handleEdit(scope.row)"

+ 2 - 2
src/views/organize_manage/PersonList.vue

@@ -146,7 +146,7 @@
                         <el-table-column
                             fixed="right"
                             label="操作"
-                            width="147">
+                            width="140">
                             <template slot-scope="scope">
                                 <el-button
                                     @click.native.prevent="handleEdit(scope.row)"
@@ -270,7 +270,7 @@
                         <el-table-column
                             fixed="right"
                             label="操作"
-                            width="147">
+                            width="140">
                             <template slot-scope="scope">
                                 <el-button
                                     @click.native.prevent="handleLook(scope.row)"

+ 1 - 1
src/views/organize_manage/index.vue

@@ -129,7 +129,7 @@
                     <el-table-column
                         fixed="right"
                         label="操作"
-                        width="220">
+                        width="170">
                         <template slot-scope="scope">
                             <el-button
                                 @click.native.prevent="handleEdit(scope.row)"