yfadmin_web/src/views/project/Index.vue

<style lang="scss">
    .subject{
        .content{
            display: flex;
            justify-content: space-between;
            .div_left{
                width: 32%;
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.24);
                border-radius:8px;
                padding: 20px 10px 20px 0;
                .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
                }
                .top_add{
                    font-size:22px;
                    margin-left:90%;
                    i{
                        font-weight: 600;
                    }
                }
            }
            .div_right{
                width: 65%;
                box-shadow:0px 2px 4px 0px rgba(0,0,0,0.24);
                border-radius:8px;
                padding: 20px 30px;
                .form{
                    label{
                        font-weight: 600;
                        font-size: 16px;
                    }
                    .req{
                        color:red;
                        margin-left: 10px;
                    }
                    .el-input-number,.el-input,.el-textarea{
                        width: 200px;
                    }
                    button{
                        width: 290px;
                    }
                }
            }
        }
    }
</style>
<template>
    <section class="subject">
        <p>项目管理 >  培训科目</p>
        <div class="content">
            <div class="div_left">
                <el-button
                    class="top_add"
                    type="text"
                    size="medium"
                    @click.stop="() => append(data)">
                    <i class="el-icon-plus"></i>
                </el-button>
                 <el-tree  v-loading="loading"
                    :data="data"
                    node-key="id" :props='props'
                    default-expand-all
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click.stop="() => edit(data)" >
                        <span class="label_name">{{ node.label }}</span>
                        <span class="edit">
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="() => append(data)">
                            <i class="el-icon-plus"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => edit(data)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => remove(data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
            <div class="div_right">
                <el-form class="form" label-width="90px" label-position='left' v-show="add">
                    <el-form-item label="科目名称">
                        <el-input v-model="form.name"></el-input>
                        <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="新办价格">
                          <el-input-number v-model="form.price_new" controls-position="right"  :min="0"></el-input-number>
                          <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="复审价格">
                          <el-input-number v-model="form.price_re" controls-position="right" :min="0" ></el-input-number>
                          <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="换证价格">
                          <el-input-number v-model="form.price_change" controls-position="right" :min="0" ></el-input-number>
                          <span class="req">*</span>
                    </el-form-item>
                    <el-form-item label="排序">
                          <el-input-number v-model="form.order" controls-position="right" :min="0" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="说明">
                        <el-input :rows="4" type="textarea" v-model="form.intro"></el-input>
                    </el-form-item>
                    <el-button @click="save" type="primary">保存</el-button>
                </el-form>
            </div>
        </div>
    </section>
</template>
<script>
// import { Base64 } from 'js-base64';
export default {
  data(){
    return{
      data:[],
      form:{name:""},
      props:{
          label:'name'
      },
      add:0,
      loading:false
    }
  },
  methods:{
      getData(){
          this.loading=true
          this.$api.getSubList().then(res=>{
              this.data=res.data.data
              this.loading=false
          })
      },
      edit(data){
          this.add=1
          var parm={
                id:data.id,
                name:data.name,
                pid:data.pid,
                price_change:data.price_change,
                price_new:data.price_new,
                price_re:data.price_re,
                intro:data.intro,
                order:0,
          }
          this.form=parm
      },
      append(data){
          this.add=1
          var parm={
                name:'',
                pid:data.id,
                price_change:0,
                price_new:0,
                price_re:0,
                intro:'',
                order:0,
          }
          this.form=parm
      },
      remove(data){
          console.log(data.id)
           this.$confirm('确定删除'+data.name+'科目？', '提示', {
                    type: 'warning'
                }).then(() => {
                   this.$api.deleteSub({id:data.id}).then(res=>{
                        this.$message({message: '删除成功！',type: 'success'});
                        this.getData()
                    })
            })
          
      },
      save(){
          var parm=this.form;
          if(parm.id){
              this.$api.updateSub(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '修改成功！',type: 'success'});
                      this.add=0
                      this.getData()
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }else{
              this.$api.saveSub(parm).then(res=>{
                  if(res.data.code==0){
                      this.$message({message: '添加成功！',type: 'success'});
                      this.add=0
                      this.getData()
                  }else{
                      this.$message.error(res.data.message);
                  }
              })
          }
      }
  },
  created(){
      this.getData()
  }
}
</script>