eta_front/src/views/classify_manage/classifylist.vue

<template>
	<div id="classifylist">
		<el-card class="box-card">
			<div slot="header" class="header">
				<div class="type-box">
					<span class="act" v-permission="permissionBtn.classifyBtn.classifyList_cnClassify">{{this.$t('ReportManage.CategoryList.chinese_tabs')}}</span>
					<span @click="$emit('typeChange','2')" v-permission="permissionBtn.enClassifyBtn.classifyList_enClassify">{{this.$t('ReportManage.CategoryList.english_tabs')}}</span>
				</div>
				<el-form :inline="true" :model="searchform" @submit.native.prevent>
					<el-form-item label="">
						<el-button v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_classifyAdd"
                            type="primary" size="small" @click="aeDialogTrue">{{$t('ReportManage.CategoryList.add_category_btn')}}</el-button>
					</el-form-item>
		  			<el-form-item>
						<el-input :placeholder="$t('ReportManage.CategoryList.category_name_ipt')" @change="search" v-model="searchform.key_word" clearable size="small">
							<i class="el-icon-search" slot="prefix" @click="search"></i>
						</el-input>
					</el-form-item>
		  		</el-form>
			</div>
			<template>
				<el-table v-if="isTableShow"
                    style="border:1px solid #eaeaea;" :data="tableData" v-loading="listLoading" :row-class-name="tableRowClassName" :element-loading-text="$t('Table.data_loading')" :default-expand-all='isexpand' row-key="Id" :tree-props="{children:'children',hasChildren:'hasChildren'}">
					<!-- <el-table-column prop="id" label="序号" width="100px" align="left">
						<template slot-scope="scope">
							<span>{{scope.row.ischild?'':scope.row.id}}</span>
						</template>
					</el-table-column> -->
					<el-table-column prop="classify_name" :label="$t('ReportManage.CategoryList.one_category_table')">
						<template slot-scope="scope">
							<span>{{scope.row.ischild?'':scope.row.ClassifyName}}</span>
							<img style="width:16px;position: relative;top:3px" src="../../assets/img/icons/ppt-icon.png" alt="" v-if="!scope.row.ischild&&scope.row.HasTeleconference">
						</template>
					</el-table-column>
					<el-table-column prop="classify_name" :label="$t('ReportManage.CategoryList.two_category_table')">
						<template slot-scope="scope">
							<span>{{scope.row.ischild?scope.row.ClassifyName:''}}</span>
							<img style="width:16px;position: relative;top:3px" src="../../assets/img/icons/ppt-icon.png" alt="" v-if="scope.row.ischild&&scope.row.HasTeleconference">
						</template>
					</el-table-column>
					<el-table-column :label="$t('Table.column_operations')" align="center">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;">
								<span class="editsty" v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_chapterSetting"
                                    v-if="scope.row.ClassifyName=='晨报' || scope.row.ClassifyName=='周报'" @click="chapterSetting(scope.row)">{{$t('ReportManage.CategoryList.settings_chapter_btn')}}</span>
								<span class="editsty" v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_authSetting"
                                    :class="{'editedsty' : editedItems.includes(scope.row.Id)}" v-if="scope.row.ischild" @click="configitem(scope.row)">{{$t('ReportManage.CategoryList.configuration_btn')}}</span>
								&nbsp;&nbsp;
								<!-- <i class="el-icon-edit-outline" @click="edititem(scope.row)"></i> -->
								<span class="editsty" v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_classifyAdd"
                                    @click="edititem(scope.row)">{{$t('Table.edit_btn')}}</span>
								&nbsp;&nbsp;
								<!-- <i class="el-icon-delete" @click="checkdeleteitem(scope.row)"></i> -->
								<span v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_classifyDel"
                                    class="deletesty" @click="checkdeleteitem(scope.row)">{{$t('Table.delete_btn')}}</span>
							</div>
		  	    		</template>
					</el-table-column>
				</el-table>
			</template>
			<el-col :span="24" class="toolbar" v-if="isTableShow">
		  		<el-pagination v-if="ispage" layout="total,prev,pager,next,jumper" background @current-change="handleCurrentChange" :page-size="pageSize" @size-change="handleSizeChange" :total="total" style="float:right;"></el-pagination>
		  	</el-col>
		</el-card>
		<!-- 添加分类弹框 -->
		<el-dialog :modal-append-to-body='false' :title="isadd? $t('ReportManage.CategoryList.add_category_btn') : $t('ReportManage.CategoryList.edit_category_btn') " :visible.sync="aeDialog" :close-on-click-modal="false" :center="true" v-dialogDrag custom-class="dialogclassLog" width="700px">
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="isadd?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{isadd? $t('ReportManage.CategoryList.add_category_btn'): $t('ReportManage.CategoryList.edit_category_btn')}}</span>
			</div>
			<el-form :model="aeForm" :rules="aerules" ref="aeForm" label-position="right" label-width="140px" class="aeForm"  @submit.native.prevent>
				<el-form-item prop="classify_name" :label="$t('ReportManage.CategoryList.category_name_ipt')">
					<el-input type="text" v-model="aeForm.classify_name" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item prop="parent_id" :label="$t('ReportManage.CategoryList.parent_category_label')">
					<el-select v-model="aeForm.parent_id" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;" @change="parentSelectChange(aeForm.parent_id)">
						<el-option label="无" :value="0"></el-option>
						<el-option v-for="(item,index) in classifyparentArr" :key="index" :label="item.ClassifyName" :value="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<!-- 下面的表单项除了后台排序，都合成一个buttoncode判断：classifyList_cnClassify_childMenu -->
				<template v-if="permissionBtn.checkPermissionBtn(permissionBtn.classifyBtn.classifyList_cnClassify_childMenu)">
					<!-- 一级目录子目录 -->
					<el-form-item :label="$t('ReportManage.CategoryList.subdirectory_label')"
						v-if="aeForm.parent_id==0&&aeForm.showType==1">
						<draggable v-model="ClassifyMenuList" animation="300">
							<div style="display:inline-block;margin-right:5px" v-for="(item,index) in ClassifyMenuList" :key="item">
								<el-input
									v-if="item.inputVisible"
									v-model="item.MenuName"
									ref="itemINput"
									size="small"
									style="width: 90px;"
									:autofocus="true"
									@keyup.enter.native="item.inputVisible=false"
									@blur="item.inputVisible=false"
								></el-input>
								<el-tag
									v-else
									closable
									:disable-transitions="false"
									@click="showInput(index)"
									@close="handleClose(index)">
									{{item.MenuName}}
								</el-tag>
							</div>
						</draggable>
						<div>
							<el-input
								v-if="inputVisible"
								v-model="inputValue"
								ref="saveTagInput"
								size="small"
								@keyup.enter.native="handleInputConfirm"
								@blur="handleInputConfirm"
								style="width: 90px;"
							>
							</el-input>
							<el-button v-else size="small" @click="showInput(-1)">+ {{$t('ReportManage.CategoryList.click_to_add_btn')}}</el-button>
						</div>
						
					</el-form-item>
					<!-- 二级目录子目录 -->
					<el-form-item :label="$t('ReportManage.CategoryList.subdirectory_label')" 
						v-if="aeForm.parent_id!=0">
						<el-select v-model="aeForm.ClassifyMenuId"  clearable :placeholder="$t('ReportManage.CategoryList.please_select')" style="width:400px;">
							<el-option 
								:label="item.MenuName" 
								:value="item.MenuId" 
								v-for="item in selectMenuOpt" 
								:key="item.MenuId"
							></el-option>
						</el-select>
					</el-form-item>
				</template>
				<template v-if="permissionBtn.checkPermissionBtn(permissionBtn.classifyBtn.classifyList_cnClassify_childMenu)">
					<el-form-item prop="label" :label="$t('ReportManage.CategoryList.category_tag_label')" v-if="aeForm.parent_id!=0">
						<el-input type="textarea" autosize v-model="aeForm.label" :placeholder="$t('ReportManage.CategoryList.please_select')" size="small" style="width:400px;font-size:14px;"></el-input>
					</el-form-item>
					<el-form-item :label="$t('ReportManage.CategoryList.display_form_label')"
						prop="showType" v-if="aeForm.parent_id==0">
						<el-select v-model="aeForm.showType" :placeholder="$t('ReportManage.CategoryList.please_select')" style="width:400px;">
							<el-option :label="$t('ReportManage.CategoryList.form_list_option')" :value="1"></el-option>
							<el-option :label="$t('ReportManage.CategoryList.form_column_option')" :value="2"></el-option>
							<el-option :label="$t('ReportManage.CategoryList.form_product_option')" :value="3"></el-option>
						</el-select>
					</el-form-item>
				</template>
				<el-form-item :label="$t('ReportManage.CategoryList.backend_sorting_label')"
                    prop="Sort" v-if="aeForm.parent_id==0&&permissionBtn.checkPermissionBtn(permissionBtn.classifyBtn.classifyList_cnClassify_backSort)">
					<el-input-number v-model="aeForm.Sort" :placeholder="$t('ReportManage.CategoryList.please_number_input')"></el-input-number>
				</el-form-item>
				<template v-if="permissionBtn.checkPermissionBtn(permissionBtn.classifyBtn.classifyList_cnClassify_childMenu)">
					<el-form-item :label="$t('ReportManage.CategoryList.page_sorting_label')"
                    prop="YbFiccSort" v-if="aeForm.parent_id==0">
					<el-input-number v-model="aeForm.YbFiccSort" :placeholder="$t('ReportManage.CategoryList.please_number_input')"></el-input-number>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.page_icon_label')"
                    v-if="aeForm.parent_id==0" prop="YbFiccIcon">
					<input type="file" size="small" name="file" @change="fileSelected(6)" id="file6" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbFiccIcon" placeholder="上传FICC页icon" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(6)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.collection_report_label')"
					v-if="aeForm.parent_id==0&&aeForm.showType!==2" prop="YbRightBanner">
					<input type="file" size="small" name="file" @change="fileSelected(11)" id="file11" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbRightBanner" :placeholder="$t('ReportManage.CategoryList.up_collection_report_lable')" size="medium" style="width:400px;">
					  <el-button slot="append" type="primary" size="mini" @click.native="clickinput(11)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
				  </el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.share_link_label')" 
					prop="YbShareBgImg" v-if="aeForm.parent_id==0">
					<input type="file" size="small" name="file" @change="fileSelected(10)" id="file10" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbShareBgImg" :placeholder="$t('ReportManage.CategoryList.up_share_link_label')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(10)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.pc_bg_label')"
					prop="YbFiccPcIcon" v-if="aeForm.parent_id==0">
					<el-select v-model="aeForm.YbFiccPcIcon" :placeholder="$t('ReportManage.CategoryList.select_bg_label')" style="width:400px;">
						<el-option :label="item.label" :value="item.val" v-for="item in YbFiccPcIconList" :key="item.label"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.mini_hidden_label')"
					prop="IsShow" v-if="aeForm.parent_id==0">
					<el-switch v-model="aeForm.IsShow" inactive-color="#ededed"></el-switch>
				</el-form-item>
				<el-form-item label="PPT转报告" prop="hasTel" v-if="aeForm.parent_id!=0">
					<el-select v-model="aeForm.hasTel" :placeholder="$t('ReportManage.CategoryList.please_select')" style="width:400px;">
						<el-option label="无" :value="0"></el-option>
						<el-option label="有" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.related_settings_label')" 
					prop="relate" v-if="!['晨报','周报'].includes(aeForm.classify_name)">
					<el-select v-model="aeForm.relate" multiple :placeholder="$t('ReportManage.CategoryList.please_select')" style="width:400px;">
						<el-option :label="$t('ReportManage.CategoryList.teleconference_label')" :value="1"></el-option>
						<el-option :label="$t('ReportManage.CategoryList.relate_videp_label')" :value="2"></el-option>
					</el-select>
				</el-form-item>
				</template>
				<!-- 这里开始是二级目录选项 -->
				<template v-if="permissionBtn.checkPermissionBtn(permissionBtn.classifyBtn.classifyList_cnClassify_childMenu)">
					<el-form-item :label="$t('ReportManage.CategoryList.share_desctription_label')" v-if="aeForm.parent_id!=0">
					<el-input type="textarea" autosize v-model="aeForm.descript" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;font-size:14px;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.section_author_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="author">
					<el-input type="text" v-model="aeForm.author" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.author_introduction_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="authorDsec">
					<el-input type="text" v-model="aeForm.authorDsec" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.author_title_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="authorTag">
					<el-input type="text" v-model="aeForm.authorTag" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.section_author_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="classifyDsec">
					<el-input type="textarea" v-model="aeForm.classifyDsec" :placeholder="$t('ReportManage.CategoryList.please_input')" size="small" style="width:400px;font-size:14px;" autosize></el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.share_link_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="YbShareBgImg">
					<input type="file" size="small" name="file" @change="fileSelected(10)" id="file10" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbShareBgImg" :placeholder="$t('ReportManage.CategoryList.up_share_link_label')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(10)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.homepage_illustrations_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="classifyImg">
					<input type="file" size="small" name="file" @change="fileSelected(1)" id="file1" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.classifyImg" :placeholder="$t('ReportManage.CategoryList.up_homepage_illustrations')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(1)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.report_illustrations_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="reportImg">
					<input type="file" size="small" name="file" @change="fileSelected(5)" id="file5" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.reportImg" :placeholder="$t('ReportManage.CategoryList.up_report_illustrations')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(5)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.column_illustration_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="columImg">
					<input type="file" size="small" name="file" @change="fileSelected(4)" id="file4" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.columImg" :placeholder="$t('ReportManage.CategoryList.up_scolumn_illustration')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(4)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.banner_head_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="bannerImg">
					<input type="file" size="small" name="file" @change="fileSelected(2)" id="file2" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.bannerImg" :placeholder="$t('ReportManage.CategoryList.up_banner_head')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(2)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.img_author_label')" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="avatar">
					<input type="file" size="small" name="file" @change="fileSelected(3)" id="file3" class="true-file" style="display:none;">
					<el-input type="text" v-model="aeForm.avatar" :placeholder="$t('ReportManage.CategoryList.up_img_author')" size="medium" style="width:400px;">
						<el-button  slot="append" type="primary" size="mini" @click.native="clickinput(3)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('ReportManage.CategoryList.list_background_image_label')" v-if="aeForm.parent_id!=0&&(parentIsList||parentIsVariety)" prop="YbListImg">
					<input type="file" size="small" name="file" @change="fileSelected(9)" id="file9" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbListImg" :placeholder="$t('ReportManage.CategoryList.up_list_background_image')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(9)">{{$t('ReportManage.CategoryList.select_img_btn')}}</el-button>
					</el-input>
				</el-form-item>
				<!-- 列表、品种的二级分类 展示分享链接配图 但是不是必填的 -->
				<el-form-item :label="$t('ReportManage.CategoryList.share_link_label')" prop="YbShareBgImg_" v-if="aeForm.parent_id!=0&&(parentIsList||parentIsVariety)">
					<input type="file" size="small" name="file" @change="fileSelected(12)" id="file12" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbShareBgImg_" :placeholder="$t('ReportManage.CategoryList.xxxxx')" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(12)">{{$t('ReportManage.CategoryList.up_share_link_label')}}</el-button>
					</el-input>
				</el-form-item>
				</template>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:right;">
				<el-button type="primary" plain size="small" @click.native="aeDialog=false">{{$t('Dialog.cancel_btn')}}</el-button>
				<el-button type="primary" size="small" @click.native="saveDialog">{{$t('Dialog.confirm_save_btn')}}</el-button>
			</div>
		</el-dialog>
		<!-- 权限配置弹窗 -->
		<PermissionDialog :isShow.sync="isShowPermissionDia" :id="classifyPermissionId" @saveConfig="saveConfig"/>
	</div>
</template>

<script>
import { classifylist,classifyparent,classifyadd,classifydelete,classifyedit,checkDeleteClassify,bannerupload } from 'api/api.js';
import PermissionDialog from './components/PermissionDialog.vue'
import draggable from 'vuedraggable';
export default{
	computed:{
		parentIsList(){
			//当前上级分类是否为列表
			let flag=false
			if(this.aeDialog){
				this.classifyparentArr.forEach(item=>{
					if(item.Id==this.aeForm.parent_id){
						if(item.ShowType==1){
							flag=true
						}
					}
				})
			}
			return flag
		},
		parentIsVariety(){
			//当前上级分类是否为品种
			let flag=false
			if(this.aeDialog){
				this.classifyparentArr.forEach(item=>{
					if(item.Id==this.aeForm.parent_id){
						if(item.ShowType==3){
							flag=true
						}
					}
				})
			}
			return flag
		},
		selectMenuOpt(){
			let arr=[]
			if(this.aeDialog){
				this.classifyparentArr.forEach(item=>{
					if(item.Id==this.aeForm.parent_id){
						arr=item.ClassifyMenuList||[]
					}
				})
			}
			return arr
		},
        //通过计算属性判断是否展示
        //当没有中文分类页面权限时，啥都不展示
        isTableShow(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.classifyBtn.classifyList_cnClassify
            )
        },
		aerules(){
			return {
				classify_name:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_input_name'),
					trigger:'blur'
				}],
				parent_id:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_select_category'),
					trigger:'change'
				}],
				abstract:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_input_introduction'),
					trigger:'blur'
				}],
				descript:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_input_description'),
					trigger:'blur'
				}],
				author:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_author_ipt'),
					trigger:'blur'
				}],
				authorDsec:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_author_introduction_ipt'),
					trigger:'blur'
				}],
				classifyDsec:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_input_column_introduction'),
					trigger:'blur'
				}],
				classifyImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_homepage_illustrations'),
					trigger:'blur'
				}],
				reportImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_report_illustrations'),
					trigger:'blur'
				}],
				bannerImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_banner_head'),
					trigger:'blur'
				}],
				avatar:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_img_author'),
					trigger:'blur'
				}],
				columImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_scolumn_illustration'),
					trigger:'blur'
				}],
				label:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_classification_label'),
					trigger:'blur'
				}],
				hasTel:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_select'),
					trigger:'change'
				}],
				showType:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_display_format'),
					trigger:'change'
				}],
				Sort:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_number_input'),
					trigger:'blur'
				}],
				YbFiccSort:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_number_input'),
					trigger:'blur'
				}],
				YbFiccIcon:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.up_page_icon_label'),
					trigger:'change'
				}],
        	YbRightBanner:[{
			required:true,
						message:this.$t('ReportManage.CategoryList.up_collection_report_lable'),
						trigger:'change'
			}],
				YbFiccPcIcon:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.select_bg_label'),
					trigger:'change'
				}],
				IsShow:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.mini_hidden_label'),
					trigger:'change'
				}],
				YbListImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_upload_label'),
					trigger:'change'
				}],
				YbShareBgImg:[{
					required:true,
					message:this.$t('ReportManage.CategoryList.please_upload_label'),
					trigger:'change'
				}],
			}
		},
		YbFiccPcIconList(){
			return [
				{
					label:this.$t('ReportManage.CategoryList.blue_color'),
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_blue.png'
				},
				{
					label:this.$t('ReportManage.CategoryList.green_color'),
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_green.png'
				},
				{
					label:this.$t('ReportManage.CategoryList.red_color'),
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_orange.png'
				},
			]
		},
	},
	data(){
		return {
			PageIndex:0,
			total:0,
			pageSize:15,
			ispage:true,
			listLoading:false,
			tableData:[],
			searchform:{
				key_word:'',
			}, 
			aeDialog:false,
			aeForm:{
				classify_name:'',
				parent_id:0,
				abstract:'',
				descript:'',
				author:'',
				authorDsec:'',
				classifyDsec:'',
				authorTag:'',
				classifyImg:'',
				reportImg:'',
				columImg:'',
				bannerImg:'',
				avatar:'',
				label:"",
				hasTel:0,//是否有电话会：0-否 1-是
				showType:1,//展示形式 1-列表 2-专栏 3-品种
				Sort:'',
				YbFiccSort:'',
				YbFiccIcon:'',
				YbIconUrl:'',
				YbBgUrl:'',
				YbFiccPcIcon:'',
				IsShow:false,//是否在小程序端展示：0-隐藏 1-显示
				YbListImg:'',//小程序研报列表封面图
				YbShareBgImg:'',
				ClassifyMenuId:'',
        		YbRightBanner:'',//报告合集配图
				relate:[],
			},
			isadd:true,
			classifyparentArr:[],
			isexpand:false,
			isShowPermissionDia: false,	//是否显示权限管理弹窗
			classifyPermissionId: 0,	//进行权限管理的分类id
			editedItems:[],	//修改过权限的分类

			inputVisible:false,
			inputValue:'',
			ClassifyMenuList:[],
		}
	},
	components: {
		PermissionDialog,
		draggable
	},
	mounted(){
		this.getlist();
		// document.onkeydown=e=>{
		// 	let keyval=window.event.keyCode;
		//     if( keyval===13 && this.$route.path === '/classifylist'){
		// 		this.getlist();
		//     }
		// }
        this.setPermissRules()
	},
	methods:{
		showInput(index){
			if(index!=-1){
				this.ClassifyMenuList[index].inputVisible=true
				this.$nextTick(_ => {
					this.$refs.itemINput[0].$refs.input.focus();
				})
				return
			}
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			if (inputValue) {
				this.ClassifyMenuList.push({MenuId:0,MenuName:inputValue,inputVisible:false});
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		handleClose(index){
			this.ClassifyMenuList.splice(index,1)
		},

		tableRowClassName({row,rowIndex}) {
			if( row.ischild ){
			  return 'success-row';
			}else{
				return '';
			}
		},
		edititem(item){  //去编辑
			classifyparent({}).then((res) => {
				if( res.Ret==200 ){
					this.classifyparentArr=[];
					res.Data.forEach((child,i)=>{
						// if(child.ClassifyName!=item.ClassifyName){
							child.Id=parseInt(child.Id);
							//如果没有子项
							if(!item.Child){
								this.classifyparentArr.push(child);
							}
						// }
					});
				}
			});
			console.log(item);
			// this.aeForm={classify_id:parseInt(item.id),classify_name:item.classify_name,parent_id:parseInt(item.parent_id),abstract:item.abstract,descript:item.descript};
			this.aeForm={
				classify_id:parseInt(item.Id),
				classify_name:item.ClassifyName,
				parent_id:item.ParentId,
				descript:item.Descript,
				author:item.ReportAuthor,
				authorDsec:item.AuthorDescript,
				classifyDsec:item.Abstract,
				authorTag:item.VipTitle,
				classifyImg:item.ReportImgUrl,
				reportImg:item.HomeImgUrl,
				columImg:item.ColumnImgUrl,
				bannerImg:item.HeadImgUrl,
				avatar:item.AvatarImgUrl,
				label:item.ClassifyLabel,
				hasTel:item.HasTeleconference,
				showType:item.ShowType,
				Sort:item.Sort,
				YbFiccSort:item.YbFiccSort,
				YbFiccIcon:item.YbFiccIcon,
				YbIconUrl:item.YbIconUrl,
				YbBgUrl:item.YbBgUrl,
				YbFiccPcIcon:item.YbFiccPcIcon,
				IsShow:item.IsShow==0?true:false,//是否在小程序端展示：0-隐藏 1-显示
				YbListImg:item.YbListImg,
				YbShareBgImg:item.YbShareBgImg,
				ClassifyMenuId:item.ClassifyMenuId||'',
        YbRightBanner:item.YbRightBanner||'',
				relate:[item.RelateTel==1?1:null,item.RelateVideo==1?2:null],
			};
			this.ClassifyMenuList=item.ClassifyMenuList?item.ClassifyMenuList.map(item=>{
				return {
					MenuId:item.MenuId,
					MenuName:item.MenuName,
					inputVisible:false
				}
			}):[]
      //若编辑的为列表、品种下的二级分类 需要计算YbShareBgImg_
      //已填写则获取已填写内容
      if(item.YbShareBgImg){
        this.aeForm.YbShareBgImg_ = item.YbShareBgImg
      }
      //若未填写则取一级分类的YbShareBgImg
      else{
        this.aeForm.YbShareBgImg_ = this.getParentYbShareBgImg(item.ParentId)
      }
			this.isadd=false;
			this.aeDialog=true;
			this.$nextTick(()=>{
				this.$refs.aeForm.clearValidate();
			})
		},
		checkdeleteitem(item){  //删除前检测
			checkDeleteClassify({ClassifyId:parseInt(item.Id)}).then(res =>{
				if(res.Ret==200){
					if(res.Data.Code==0){
				   		this.deleteitem(item);
					}else{
						this.$message.error( res.Data.Msg );
					}
				}
			});
		},
		deleteitem(item){
			this.$confirm(this.$t('ReportManage.CommodityConfiguration.delete_info_msg'),this.$t('Confirm.prompt_slogan'),{type:'warning'}).then(() => {
					classifydelete({ClassifyId:parseInt(item.Id)}).then(res =>{
						if( res.Ret==200 ){
							this.$message.success( res.Msg );
							this.getlist();
						}
					});
			}).catch(() => {});
		},
		configitem(item){
			this.classifyPermissionId=item.Id
			this.isShowPermissionDia=true
		},
		saveDialog(){  //保存
			this.$refs.aeForm.validate((valid)=>{
				if( valid ){
					// let params={classify_name:this.aeForm.classify_name,parent_id:parseInt(this.aeForm.parent_id),abstract:this.aeForm.abstract,descript:this.aeForm.descript};
					let params={
						ClassifyName:this.aeForm.classify_name,
						ParentId:parseInt(this.aeForm.parent_id),
						Descript:this.aeForm.descript,
						ReportAuthor:this.aeForm.author,
						AuthorDescript:this.aeForm.authorDsec,
						VipTitle:this.aeForm.authorTag,
						Abstract:this.aeForm.classifyDsec,
						ColumnImgUrl:this.aeForm.columImg,
						ReportImgUrl:this.aeForm.classifyImg,
						HomeImgUrl:this.aeForm.reportImg,
						HeadImgUrl:this.aeForm.bannerImg,
						AvatarImgUrl:this.aeForm.avatar,
						ClassifyLabel:this.aeForm.label,
						ShowType:this.aeForm.showType,
						HasTeleconference:this.aeForm.hasTel,
						Sort:this.aeForm.Sort?Number(this.aeForm.Sort):0,
						YbFiccSort:this.aeForm.YbFiccSort?Number(this.aeForm.YbFiccSort):0,
						YbFiccIcon:this.aeForm.YbFiccIcon,
						YbIconUrl:this.aeForm.YbIconUrl,
						YbBgUrl:this.aeForm.YbBgUrl,
						YbFiccPcIcon:this.aeForm.YbFiccPcIcon,
						IsShow:this.aeForm.IsShow?0:1,//是否在小程序端展示：0-隐藏 1-显示
						YbListImg:this.aeForm.YbListImg,
            /* 一级分类为列表、品种的报告，二级分类的分享链接图*/
						YbShareBgImg:this.aeForm.parent_id!=0&&(this.parentIsList||this.parentIsVariety)?this.aeForm.YbShareBgImg_:this.aeForm.YbShareBgImg,
						ClassifyMenuId:this.aeForm.ClassifyMenuId||0,
            YbRightBanner:this.aeForm.YbRightBanner||'',
						RelateTel:this.aeForm.relate.includes(1)?1:0,
						RelateVideo:this.aeForm.relate.includes(2)?1:0,
					};
					params.MenuList=this.ClassifyMenuList.map(item=>{
						return {
							MenuId:item.MenuId,
							MenuName:item.MenuName
						}
					})
					if( this.isadd ){
						classifyadd(params).then(res =>{
							if( res.Ret==200 ){
								this.$message.success( res.Msg );
								this.getlist();
								this.aeDialog=false;
							}
						});
					}else{
						params.ClassifyId=this.aeForm.classify_id;
						classifyedit(params).then(res =>{
							if( res.Ret==200 ){
								this.$message.success( res.Msg );
								this.getlist();
								this.aeDialog=false;
							}
						});
					}
					// this.isexpand=true;
				}
			});
		},
		aeDialogTrue(){  //去新增
			classifyparent({}).then((res) => {
				if( res.Ret==200 ){
					this.classifyparentArr=res.Data || [];
					this.aeForm={
						classify_name:'',
						parent_id:0,
						abstract:'',
						descript:'',
						author:'',
						authorDsec:'',
						authorTag:'',
						classifyDsec:'',
						classifyImg:'',
						reportImg:'',
						columImg:'',
						bannerImg:'',
						avatar:'',
						label:'',
						hasTel:0,
						showType:1,
						Sort:'',
						YbFiccSort:'',
						YbFiccIcon:'',
						YbIconUrl:'',
						YbBgUrl:'',
						YbFiccPcIcon:'',
						IsShow:false,//是否在小程序端展示：0-隐藏 1-显示
						YbListImg:'',
						YbShareBgImg:'',
						ClassifyMenuId:'',
            YbRightBanner:'',
						relate:[]
					};
					this.ClassifyMenuList=[]
					this.isadd=true;
					this.aeDialog=true;
					this.$nextTick(()=>{
						this.$refs.aeForm.clearValidate();
					})
				}
			});
		},
		getlist(){  //获取列表
			let params={CurrentIndex:this.PageIndex,PageSize:this.pageSize,KeyWord:this.searchform.key_word};
			this.listLoading = true;
			classifylist(params).then((res) => {
				if( res.Ret==200 ){
					this.tableData = res.Data.List || [];
					this.total=parseInt(res.Data.Paging.Totals);
					this.tableData.forEach((item,index)=>{
						if( item.Child ){
							// item.hasChildren=true;
							let childnode=JSON.parse(JSON.stringify(item.Child));
							childnode.forEach((itemchild,i)=>{
								itemchild.ischild=true;
							});
							item.children=childnode;
						}
					});
					// this.$nextTick(function(){
					// 	this.isexpand=true;
					// });
				}
				this.listLoading = false;
			});
		},
		search(){  //搜索
			this.ispage = false;
			this.$nextTick(() => {
				this.PageIndex = 0;
				this.getlist();
				this.ispage = true;
			});
		},
		handleCurrentChange(current){  //分页页码跳转
			this.PageIndex = current;
			this.getlist();
		},
		handleSizeChange(val){    //分页页码改变
	        this.pageSize=val;
	        this.getlist();
		},
		clickinput(type){  //上传模拟点击
			$(`#file${type}`).click();
		},
		fileSelected(type){  //选择文件上传
			const that = this;
		    if( document.getElementById('file'+type).files[0] ){
		        let hostfile = document.getElementById('file'+type).files[0];
		        let size = Math.floor(hostfile.size / 1024 / 1024);
		        if( size>200 ){
		            that.$message.error('上传文件大小不能大于200M！');
		            hostfile = {};
		            return false
		        }
		        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
		        	let form = new FormData();
		        	form.append('file',hostfile);  //hostfile.name
					that.uploadloading=true;
					bannerupload(form).then((res) => {
						if( res.Ret === 200 ){
							if(type == 1) {
								that.aeForm.classifyImg=res.Data.ResourceUrl;
							}else if(type == 2) {
								that.aeForm.bannerImg=res.Data.ResourceUrl;
							}else if(type == 3) {
								that.aeForm.avatar=res.Data.ResourceUrl
							}else if(type == 4) {
								that.aeForm.columImg=res.Data.ResourceUrl
							}else if(type == 5) {
								that.aeForm.reportImg=res.Data.ResourceUrl
							}else if(type == 6){
								that.aeForm.YbFiccIcon=res.Data.ResourceUrl
							}else if(type == 7){
								that.aeForm.YbIconUrl=res.Data.ResourceUrl
							}else if(type == 8){
								that.aeForm.YbBgUrl=res.Data.ResourceUrl
							}else if(type == 9){
								this.aeForm.YbListImg=res.Data.ResourceUrl
							}else if(type == 10){
								this.aeForm.YbShareBgImg=res.Data.ResourceUrl
							}else if(type == 11){
                this.aeForm.YbRightBanner=res.Data.ResourceUrl
              }else if(type==12){
                this.aeForm.YbShareBgImg_=res.Data.ResourceUrl
              }
						}
						$("#file"+type).val('');
						hostfile = {};
					});
				}else{
					that.$message.error('上传文件格式不正确！');
		        }
		    } 
		},
		// 保存
		saveConfig(classifyId){
			if(!this.editedItems.includes(classifyId)) this.editedItems.push(classifyId)
			this.isShowPermissionDia=false
		},
		// 晨报周报 去设置章节
		chapterSetting(row){
			let reportType;
			if(row.ClassifyName=='周报'){
				reportType='week'
			}else{
				reportType='day'
			}
			this.$router.push({path:'chapterSetting',query:{reportType}})
		},
    //改变上级分类触发
    parentSelectChange(item){
      if(!item) return
      let YbShareBgImg = this.getParentYbShareBgImg(item)
      if(!this.aeForm.YbShareBgImg){
        this.$set(this.aeForm,'YbShareBgImg_',YbShareBgImg)
      }
    },
    //根据上级分类id获取YbShareBgImg
    getParentYbShareBgImg(id){
      let YbShareBgImg = ''
      let parent = this.classifyparentArr.find((item)=>{return item.Id===id})
      if(!parent) return
      YbShareBgImg = parent.YbShareBgImg||''
      return YbShareBgImg
    },
    //由于表单一些项可配置，表单验证规则也需要过滤掉不展示的项
    setPermissRules(){
            const {classifyBtn,checkPermissionBtn} = this.permissionBtn
            const permissMap={
                'YbFiccIcon':checkPermissionBtn(classifyBtn.classifyList_cnClassify_ficcIcon),
                'YbRightBanner':checkPermissionBtn(classifyBtn.classifyList_cnClassify_reportImgs),
                'YbShareBgImg':checkPermissionBtn(classifyBtn.classifyList_cnClassify_shareImgs),
                'YbFiccPcIcon':checkPermissionBtn(classifyBtn.classifyList_cnClassify_pcBackColor)
            }
            for(let k in permissMap){
                if(!permissMap[k]&&this.aerules[k]){
                    delete this.aerules[k]
                }
            }
        }
	}
}	
</script>

<style lang="scss">
	#classifylist{
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.type-box{
				span{
					cursor: pointer;
					display: inline-block;
					margin-right: 50px;
					font-size: 18px;
					padding-bottom: 10px;
				}
				.act{
					color: #409EFF;
					border-bottom: 2px solid #409EFF;
				}
			}
		}
	}


	#classifylist{ overflow:hidden;
	.dialogclassLog {
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		margin-top: 0 !important;
		.el-dialog__body {
			height:65vh;
    		overflow-y: auto;
		}
	}
	.el-input{
    width: 100%;
  }
	.el-form-item__label {
		width: 130px !important;
	}
	.editedsty{
		color: #0030a9;
	}
		.header .el-form-item{ margin-bottom:0; }
	}
</style>