|
@@ -0,0 +1,553 @@
|
|
|
+<template>
|
|
|
+ <div class="test2">
|
|
|
+
|
|
|
+ <div class="test2-wrapper">
|
|
|
+ <div class="header">
|
|
|
+ <el-button plain type="primary" icon="el-icon-search" @click="handel_search">刷 新</el-button>
|
|
|
+ <!--<el-button @click="checkedKeys">得到节点id</el-button>-->
|
|
|
+ <el-upload
|
|
|
+ action
|
|
|
+ :show-file-list="false"
|
|
|
+ class="upload-demo"
|
|
|
+ :http-request="file_uploader"
|
|
|
+ :before-upload="file_verified"
|
|
|
+ >
|
|
|
+ <el-button plain
|
|
|
+ type="success"
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ >导 入
|
|
|
+ </el-button>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <!--<el-button plain type="info" icon="el-icon-arrow-up" @click="order_by_real_amount" style="margin-right:0px">真实人数排序</el-button>-->
|
|
|
+ <!--<el-button plain type="info" icon="el-icon-arrow-down" @click="order_by_false_amount">虚假人数排序</el-button>-->
|
|
|
+ <!--<el-button plain type="info" icon="el-icon-edit" @click="handel_type" >编辑</el-button>-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="head-item">
|
|
|
+ <el-select v-model="params.orderByInfo" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectList"
|
|
|
+ :key="item.text"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text headrow">
|
|
|
+ <el-input v-model="params.typeName" placeholder="请输入题目内容内容" style="width:200px"></el-input>
|
|
|
+ <el-input v-model="params.typeId" placeholder="请输入题型编号" style="width:200px"></el-input>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="params.updateDate"
|
|
|
+ style="width:200px"
|
|
|
+ value-format="yyyyMMdd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="head-item">
|
|
|
+
|
|
|
+ <el-select v-model="params.order" placeholder="请选择排序" @change="orderSelect">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button plain type="primary" icon="el-icon-search" @click="handel_search">搜索</el-button>
|
|
|
+
|
|
|
+ <el-button plain type="primary" icon="el-icon-search" @click="handel_cdn">刷新CDN</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="data-wrapper">
|
|
|
+ <div class="left">
|
|
|
+
|
|
|
+ <el-tree :data="table_data" :props="defaultProps" @node-click="handel_node_click" ref="tree"></el-tree>
|
|
|
+ <!--node-key="id" show-checkbox :check-strictly="true"></el-tree>-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="center">
|
|
|
+ <div class="content">
|
|
|
+ <el-form label-width="100px" :model="dialog_dto" ref="ruleForm">
|
|
|
+
|
|
|
+ <div v-for="dialog_item in dialog_list">
|
|
|
+ <el-form-item
|
|
|
+ v-if="dialog_item.type === 'text'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ :prop="dialog_item.prop"
|
|
|
+ >
|
|
|
+ <el-input v-model.trim="dialog_dto[dialog_item.prop]"
|
|
|
+ :placeholder="dialog_item.placeholder"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-if="dialog_item.type === 'text_disabled'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ :prop="dialog_item.prop"
|
|
|
+ >
|
|
|
+ {{dialog_dto[dialog_item.prop]}}
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-else-if="dialog_item.type === 'checkbox'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ :prop="dialog_item.prop"
|
|
|
+ >
|
|
|
+ <el-checkbox :true-label="1" :false-label="0" v-model="dialog_dto[dialog_item.prop]"
|
|
|
+ :checked="dialog_dto[dialog_item.prop] === 1" ></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-if="dialog_item.type === 'date'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dialog_dto[dialog_item.prop]"
|
|
|
+ value-format="yyyyMMdd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-else-if="dialog_item.type === 'select'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ >
|
|
|
+ <el-select v-model="dialog_dto[dialog_item.prop]"
|
|
|
+ :placeholder="dialog_item.placeholder">
|
|
|
+ <el-option
|
|
|
+ v-for="item in dialog_item.select"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ v-if="dialog_item.type === 'select_number'"
|
|
|
+ :label="dialog_item.label"
|
|
|
+ >
|
|
|
+ <!--<el-option -->
|
|
|
+ <!--v-for="item in options"-->
|
|
|
+ <!--:key="item.value"-->
|
|
|
+ <!--:label="item.label"-->
|
|
|
+ <!--:value="item.value">-->
|
|
|
+ <!--</el-option>-->
|
|
|
+
|
|
|
+ <el-select v-model="dialog_dto[dialog_item.prop]"
|
|
|
+ :placeholder="dialog_item.placeholder" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+ <div class="footer-wrapper" v-if="dialog_list.length > 0">
|
|
|
+
|
|
|
+ <el-button type="primary" @click="handel_dialog_conform(dialog_dto)">修 改</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right">
|
|
|
+
|
|
|
+ <div class="right-wrapper" v-for="item in dialog_right_list">
|
|
|
+ <div class="content">
|
|
|
+ <el-form label-position="top">
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ :label="item.start + '-'+ item.end"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ v-model="item.resultName"
|
|
|
+ placeholder="请输入">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+ <div class="footer-wrapper" v-if="dialog_right_list.length > 0">
|
|
|
+
|
|
|
+ <el-button type="primary" @click="handel_dialog_conform(item)">修 改</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import miniApi from '@/api/mini_test';
|
|
|
+ import {uploadFile} from '@/utils/util';
|
|
|
+
|
|
|
+ const class_dialog_list = [
|
|
|
+ {label: '类别名称', prop: 'className', placeholder: '请输入', type: 'text'}
|
|
|
+ ];
|
|
|
+
|
|
|
+ const type_dialog_list = [
|
|
|
+ {label: '类别', prop: 'classId', type: 'select'},
|
|
|
+ {label: '题型编号', prop: 'id', placeholder: '请输入', type: 'text_disabled'},
|
|
|
+ {label: '下题编号', prop: 'nextType', placeholder: '请输入', type: 'text'},
|
|
|
+ {label: '题型名称', prop: 'typeName', placeholder: '请输入', type: 'text'},
|
|
|
+ {label: '测试人数', prop: 'amount', placeholder: '请输入', type: 'text'},
|
|
|
+ {label: '真实测试人数', prop: 'realAmount', placeholder: '请输入', type: 'text_disabled'},
|
|
|
+ {label: '更新日期', prop: 'updateDate', placeholder: '请输入', type: 'date'},
|
|
|
+ {label: '首页图', prop: 'imageurlCarousel', placeholder: '请输入', type: 'text'},
|
|
|
+ {label: '轮播图', prop: 'carousel', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '猜你喜欢', prop: 'love', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '每日推荐', prop: 'recommend', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '热点', prop: 'hot', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '首页', prop: 'isFirst', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '每日热点', prop: 'dayhot', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '推荐', prop: 'daytuijian', placeholder: '请输入', type: 'checkbox'},
|
|
|
+ {label: '每日更新', prop: 'daynew', placeholder: '请输入', type: 'checkbox'},
|
|
|
+
|
|
|
+ ];
|
|
|
+
|
|
|
+ const question_dialog_list = [
|
|
|
+ {label: '问题名称', prop: 'questionName', placeholder: '请输入', type: 'text'}
|
|
|
+ ];
|
|
|
+
|
|
|
+ const option_dialog_list = [
|
|
|
+ {label: '选项名称', prop: 'optionName', placeholder: '请输入', type: 'text'},
|
|
|
+ {label: '选项分数', prop: 'optionScope', placeholder: '请输入', type: 'text'}
|
|
|
+ ];
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "Test2",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [{
|
|
|
+ value: '1',
|
|
|
+ label: '真实人数排序↓'
|
|
|
+ }, {
|
|
|
+ value: '2',
|
|
|
+ label: '虚假人数排序↓'
|
|
|
+ }, {
|
|
|
+ value: '3',
|
|
|
+ label: '更新时间排序↓'
|
|
|
+ }, {
|
|
|
+ value: '4',
|
|
|
+ label: '更新时间排序↑'
|
|
|
+ }],
|
|
|
+
|
|
|
+ fileList: [],
|
|
|
+ hiddenIcon: false,
|
|
|
+ uploadFile: {},
|
|
|
+
|
|
|
+ table_data: [],
|
|
|
+
|
|
|
+ dialog_list: [],
|
|
|
+ dialog_dto: {},
|
|
|
+
|
|
|
+ dialog_right_list: [],
|
|
|
+
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ params:{},
|
|
|
+ selectList:[
|
|
|
+ {label:'轮播图',value:'carousel'},
|
|
|
+ {label:'猜你喜欢',value:'love'},
|
|
|
+ {label:'每日推荐',value:'recommend'},
|
|
|
+ {label:'热点',value:'hot'},
|
|
|
+ {label:'首页',value:'isFirst'},
|
|
|
+ {label:'每日热点',value:'dayhot'},
|
|
|
+ {label:'推荐',value:'daytuijian'},
|
|
|
+ {label:'每日更新',value:'daynew'},
|
|
|
+ {label:'下题编号',value:'nextType'},
|
|
|
+ ],
|
|
|
+ classes:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkedKeys(data) {
|
|
|
+ console.log(this.$refs.tree.getCheckedKeys())
|
|
|
+ alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.handel_search()
|
|
|
+ },
|
|
|
+
|
|
|
+ handel_search() {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '拼命加载中',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ });
|
|
|
+ this.dialog_right_list = [];
|
|
|
+ this.dialog_list = [];
|
|
|
+ miniApi.list(this.params).then(res => {
|
|
|
+ this.convert_tree(res);
|
|
|
+ this.table_data = res;
|
|
|
+ console.log(res)
|
|
|
+ this.classes = res;
|
|
|
+ loading.close();
|
|
|
+ this.params = {};
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handel_node_click(item) {
|
|
|
+ this.dialog_dto = item;
|
|
|
+ let type = this.get_type(item);
|
|
|
+ this.dialog_right_list = [];
|
|
|
+ switch (type) {
|
|
|
+ case 'class':
|
|
|
+ this.dialog_list = class_dialog_list;
|
|
|
+ break;
|
|
|
+ case 'type':
|
|
|
+ item.result.map(m => m.resultName = m.resultName.replace(/\\n/g,"\n"));
|
|
|
+ miniApi.class_list().then(res => {
|
|
|
+ let select = res.map(m => {
|
|
|
+ return {
|
|
|
+ label: m.className,
|
|
|
+ value: m.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.dialog_list = type_dialog_list;
|
|
|
+
|
|
|
+ console.log(this.dialog_list)
|
|
|
+
|
|
|
+ this.dialog_list.find(f => f.type = 'select').select = select;
|
|
|
+
|
|
|
+ this.dialog_right_list = item.result;
|
|
|
+
|
|
|
+ console.log(this.dialog_list)
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 'question':
|
|
|
+ this.dialog_list = question_dialog_list;
|
|
|
+ break;
|
|
|
+ case 'option':
|
|
|
+ this.dialog_list = option_dialog_list;
|
|
|
+ break;
|
|
|
+ case 'result':
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ convert_tree(list) {
|
|
|
+ list.forEach(f => {
|
|
|
+
|
|
|
+ if (f.className && f.typeName) {
|
|
|
+ f.name = f.typeName;
|
|
|
+ } else if (f.questionName) {
|
|
|
+ f.name = f.questionName;
|
|
|
+ } else if (f.optionName) {
|
|
|
+ f.name = f.optionName;
|
|
|
+ } else {
|
|
|
+ f.name = f.className;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (f.type || f.question || f.option) {
|
|
|
+ f.children = f.type || f.question || f.option;
|
|
|
+ this.convert_tree(f.type || f.question || f.option)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ order_by_real_amount(){
|
|
|
+ this.params.realAmount = "true";
|
|
|
+ this.handel_search();
|
|
|
+ },
|
|
|
+ order_by_false_amount(){
|
|
|
+ this.params.amount = "true";
|
|
|
+ this.handel_search();
|
|
|
+ },
|
|
|
+ handel_dialog_cancel(item) {
|
|
|
+
|
|
|
+ },
|
|
|
+ orderSelect(val){
|
|
|
+ this.params.order = val;
|
|
|
+ this.handel_search();
|
|
|
+ },
|
|
|
+ get_type(item) {
|
|
|
+ if ('className' in item && 'typeName' in item) {
|
|
|
+ return 'type';
|
|
|
+ } else if ('questionName' in item) {
|
|
|
+ return 'question';
|
|
|
+ } else if ('optionName' in item) {
|
|
|
+ return 'option';
|
|
|
+ } else if ('resultName' in item) {
|
|
|
+ return 'result';
|
|
|
+ } else {
|
|
|
+ return 'class';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handel_type(){
|
|
|
+
|
|
|
+ },
|
|
|
+ handel_dialog_conform(item) {
|
|
|
+
|
|
|
+
|
|
|
+ this.$confirm('此操作将修改数据, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ let type = this.get_type(item);
|
|
|
+ switch (type) {
|
|
|
+ case 'class':
|
|
|
+ item.id = item.classId;
|
|
|
+ miniApi.class_update(item).then(this.call_back);
|
|
|
+ break;
|
|
|
+ case 'type':
|
|
|
+ console.log(item)
|
|
|
+ miniApi.type_update(item).then(this.call_back);
|
|
|
+ break;
|
|
|
+ case 'question':
|
|
|
+ miniApi.question_update(item).then(this.call_back);
|
|
|
+ break;
|
|
|
+ case 'option':
|
|
|
+ miniApi.option_update(item).then(this.call_back);
|
|
|
+ break;
|
|
|
+ case 'result':
|
|
|
+ miniApi.result_update(item).then(this.call_back);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ call_back(res) {
|
|
|
+ // this.handel_search();
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '修改成功!'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ file_uploader(params) {
|
|
|
+ let formData = new FormData();
|
|
|
+ // 向 formData 对象中添加文件
|
|
|
+ formData.append('file', params.file);
|
|
|
+ miniApi.upload_excel(formData).then(res => {
|
|
|
+ this.handel_search();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ file_verified(params) {
|
|
|
+ let file_name = params.name;
|
|
|
+ let ext = file_name.substr(file_name.lastIndexOf('.') + 1, file_name.length - 1);
|
|
|
+ return ext === 'xls' || ext === 'xlsx';
|
|
|
+ },
|
|
|
+ handel_cdn(){
|
|
|
+ miniApi.freshCDN().then( this.init() )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .test2 {
|
|
|
+ position: relative;
|
|
|
+ padding: 4px 8px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #eee;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .test2-wrapper {
|
|
|
+ height: 91%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ .header {
|
|
|
+ margin: 0 0 10px;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ /deep/ .el-button {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ padding: 4px;
|
|
|
+ height: 100%;
|
|
|
+ .left {
|
|
|
+ overflow: auto;
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item {
|
|
|
+
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ .footer-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ width: 40%;
|
|
|
+
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ overflow: auto;
|
|
|
+ width: 26%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|