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">中文分类</span>
					<span @click="$emit('typeChange','2')">英文分类</span>
				</div>
				<el-form :inline="true" :model="searchform" @submit.native.prevent>
					<el-form-item label="">
						<el-button type="primary" size="small" @click="aeDialogTrue">添加分类</el-button>
					</el-form-item>
		  			<el-form-item>
						<el-input placeholder="分类名称" @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 style="border:1px solid #eaeaea;" :data="tableData" v-loading="listLoading" :row-class-name="tableRowClassName" element-loading-text="数据加载中..." :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="一级分类">
						<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="二级分类">
						<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="操作" align="center">
						<template slot-scope="scope">
							<div style="color:#4099ef; font-size:24px;">
								<span class="editsty" v-if="scope.row.ClassifyName=='晨报' || scope.row.ClassifyName=='周报'" @click="chapterSetting(scope.row)">章节设置</span>
								<span class="editsty" :class="{'editedsty' : editedItems.includes(scope.row.Id)}" v-if="scope.row.ischild" @click="configitem(scope.row)">权限配置</span>
								&nbsp;&nbsp;
								<!-- <i class="el-icon-edit-outline" @click="edititem(scope.row)"></i> -->
								<span class="editsty" @click="edititem(scope.row)">编辑</span>
								&nbsp;&nbsp;
								<!-- <i class="el-icon-delete" @click="checkdeleteitem(scope.row)"></i> -->
								<span class="deletesty" @click="checkdeleteitem(scope.row)">删除</span>
							</div>
		  	    		</template>
					</el-table-column>
				</el-table>
			</template>
			<el-col :span="24" class="toolbar">
		  		<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?'添加分类':'编辑分类'" :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?'添加分类':'编辑分类'}}</span>
			</div>
			<el-form :model="aeForm" :rules="aerules" ref="aeForm" label-position="right" label-width="140px" class="demo-aeForm" id="login-container" @submit.native.prevent>
				<el-form-item prop="classify_name" label="分类名称">
					<el-input type="text" v-model="aeForm.classify_name" placeholder="请输入" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item prop="parent_id" label="上级分类">
					<el-select v-model="aeForm.parent_id" placeholder="请选择" 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>
				<!-- 子目录 -->
				<el-form-item 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)">+ 点击新增</el-button>
					</div>
					
				</el-form-item>
				<el-form-item label="子目录" v-if="aeForm.parent_id!=0">
					<el-select v-model="aeForm.ClassifyMenuId"  clearable placeholder="请选择" 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>

				<el-form-item prop="label" label="分类标签" v-if="aeForm.parent_id!=0">
					<el-input type="textarea" autosize v-model="aeForm.label" placeholder="请输入" size="small" style="width:400px;font-size:14px;"></el-input>
				</el-form-item>
				<el-form-item label="展示形式" prop="showType" v-if="aeForm.parent_id==0">
					<el-select v-model="aeForm.showType" placeholder="请选择" style="width:400px;">
						<el-option label="列表" :value="1"></el-option>
						<el-option label="专栏" :value="2"></el-option>
						<el-option label="品种" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="后台排序" prop="Sort" v-if="aeForm.parent_id==0">
					<el-input-number v-model="aeForm.Sort" placeholder="请输入数字"></el-input-number>
					<!-- <el-input type="number" v-model="aeForm.Sort" placeholder="请输入数字" size="small" ></el-input> -->
				</el-form-item>
				<el-form-item label="FICC页排序" prop="YbFiccSort" v-if="aeForm.parent_id==0">
					<el-input-number v-model="aeForm.YbFiccSort" placeholder="请输入数字"></el-input-number>
					<!-- <el-input type="number" v-model="aeForm.YbFiccSort" placeholder="请输入数字" size="small" style="width:400px;"></el-input> -->
				</el-form-item>
				<el-form-item label="FICC页icon" 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)">选择图片</el-button>
					</el-input>
				</el-form-item>
        <el-form-item 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="上传报告合集配图" size="medium" style="width:400px;">
					  <el-button slot="append" type="primary" size="mini" @click.native="clickinput(11)">选择图片</el-button>
				  </el-input>
				</el-form-item>
				<!-- <el-form-item label="已购icon" v-if="aeForm.parent_id==0" prop="YbIconUrl">
					<input type="file" size="small" name="file" @change="fileSelected(7)" id="file7" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbIconUrl" placeholder="上传已购icon" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(7)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="已购详情配图" v-if="aeForm.parent_id==0" prop="YbBgUrl">
					<input type="file" size="small" name="file" @change="fileSelected(8)" id="file8" class="true-file" style="display:none;">
					<el-input readonly type="text" v-model="aeForm.YbBgUrl" placeholder="上传已购详情配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(8)">选择图片</el-button>
					</el-input>
				</el-form-item> -->
        <!-- 一级分类 展示分享链接配图 -->
				<el-form-item 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="上传分享链接配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(10)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="PC端背景颜色" prop="YbFiccPcIcon" v-if="aeForm.parent_id==0">
					<el-select v-model="aeForm.YbFiccPcIcon" placeholder="选择背景颜色" 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="小程序端隐藏" prop="IsShow" v-if="aeForm.parent_id==0">
					<el-switch v-model="aeForm.IsShow" inactive-color="#ededed"></el-switch>
					<!-- <span>{{aeForm.IsShow?'开':'关'}}</span> -->
				</el-form-item>
				<el-form-item label="PPT转报告" prop="hasTel" v-if="aeForm.parent_id!=0">
					<el-select v-model="aeForm.hasTel" placeholder="请选择" 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="关联设置" prop="relate" v-if="!['晨报','周报'].includes(aeForm.classify_name)">
					<el-select v-model="aeForm.relate" multiple placeholder="请选择" style="width:400px;">
						<el-option label="报告电话会" :value="1"></el-option>
						<el-option label="视频关联报告" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item prop="abstract" label="分类简介" v-if="aeForm.parent_id!=0">
					<el-input type="textarea" v-model="aeForm.abstract" placeholder="请输入" size="small" style="width:400px;"></el-input>
				</el-form-item> -->
				<el-form-item label="分享描述" v-if="aeForm.parent_id!=0">
					<el-input type="textarea" autosize v-model="aeForm.descript" placeholder="请输入" size="small" style="width:400px;font-size:14px;"></el-input>
				</el-form-item>
				<el-form-item label="栏目作者" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="author">
					<el-input type="text" v-model="aeForm.author" placeholder="请输入" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item label="作者简介" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="authorDsec">
					<el-input type="text" v-model="aeForm.authorDsec" placeholder="请输入" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item label="作者头衔" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="authorTag">
					<el-input type="text" v-model="aeForm.authorTag" placeholder="请输入" size="small" style="width:400px;"></el-input>
				</el-form-item>
				<el-form-item label="栏目简介" v-if="aeForm.parent_id!=0&&!parentIsList&&!parentIsVariety" prop="classifyDsec">
					<el-input type="textarea" v-model="aeForm.classifyDsec" placeholder="请输入" size="small" style="width:400px;font-size:14px;" autosize></el-input>
				</el-form-item>
				<el-form-item 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="上传分享链接配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(10)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item 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="上传首页配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(1)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item 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="上传研报配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(5)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item 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="上传专栏配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(4)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="头部banner" 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="上传头部banner" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(2)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item 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="上传头像" size="medium" style="width:400px;">
						<el-button  slot="append" type="primary" size="mini" @click.native="clickinput(3)">选择图片</el-button>
					</el-input>
				</el-form-item>
				<el-form-item 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="上传列表背景图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(9)">选择图片</el-button>
					</el-input>
				</el-form-item>
        <!-- 列表、品种的二级分类 展示分享链接配图 但是不是必填的 -->
        <el-form-item 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="上传分享链接配图" size="medium" style="width:400px;">
						<el-button slot="append" type="primary" size="mini" @click.native="clickinput(12)">选择图片</el-button>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:right;">
				<el-button type="primary" plain size="small" @click.native="aeDialog=false">取 消</el-button>
				<el-button type="primary" size="small" @click.native="saveDialog">保 存</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
		},
	},
	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:[],
			},
			aerules:{
				classify_name:[{
					required:true,
					message:'请输入分类名称',
					trigger:'blur'
				}],
				parent_id:[{
					required:true,
					message:'请选择父级分类',
					trigger:'change'
				}],
				abstract:[{
					required:true,
					message:'请输入分类简介',
					trigger:'blur'
				}],
				descript:[{
					required:true,
					message:'请输入分类描述',
					trigger:'blur'
				}],
				author:[{
					required:true,
					message:'请输入栏目作者',
					trigger:'blur'
				}],
				authorDsec:[{
					required:true,
					message:'请输入作者简介',
					trigger:'blur'
				}],
				classifyDsec:[{
					required:true,
					message:'请输入栏目简介',
					trigger:'blur'
				}],
				classifyImg:[{
					required:true,
					message:'请上传首页配图',
					trigger:'blur'
				}],
				reportImg:[{
					required:true,
					message:'请上传研报配图',
					trigger:'blur'
				}],
				bannerImg:[{
					required:true,
					message:'请上传头部banner',
					trigger:'blur'
				}],
				avatar:[{
					required:true,
					message:'请上传作者头像',
					trigger:'blur'
				}],
				columImg:[{
					required:true,
					message:'请上传专栏配图',
					trigger:'blur'
				}],
				label:[{
					required:true,
					message:'请输入分类标签',
					trigger:'blur'
				}],
				hasTel:[{
					required:true,
					message:'请选择',
					trigger:'change'
				}],
				showType:[{
					required:true,
					message:'请选择展示形式',
					trigger:'change'
				}],
				Sort:[{
					required:true,
					message:'请输入数字',
					trigger:'blur'
				}],
				YbFiccSort:[{
					required:true,
					message:'请输入数字',
					trigger:'blur'
				}],
				YbFiccIcon:[{
					required:true,
					message:'上传FICC页icon',
					trigger:'change'
				}],
        YbRightBanner:[{
          required:true,
					message:'上传报告合集配图',
					trigger:'change'
        }],
				YbFiccPcIcon:[{
					required:true,
					message:'选择背景颜色',
					trigger:'change'
				}],
				IsShow:[{
					required:true,
					message:'小程序端隐藏',
					trigger:'change'
				}],
				YbListImg:[{
					required:true,
					message:'上传列表背景图',
					trigger:'change'
				}],
				YbShareBgImg:[{
					required:true,
					message:'上传列表背景图',
					trigger:'change'
				}],
			},
			isadd:true,
			classifyparentArr:[],
			isexpand:false,
			isShowPermissionDia: false,	//是否显示权限管理弹窗
			classifyPermissionId: 0,	//进行权限管理的分类id
			editedItems:[],	//修改过权限的分类

			YbFiccPcIconList:[
				{
					label:'蓝色',
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_blue.png'
				},
				{
					label:'绿色',
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_green.png'
				},
				{
					label:'红色',
					val:'https://hzstatic.hzinsights.com/static/yb_wx/ficc_classify_bg_orange.png'
				},
			],

			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();
		//     }
		// }
	},
	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('确认删除吗?','提示',{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
    }
	}
}	
</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 {
			max-height: 600px;
    		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>