vue前端使用一些记录

<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="归属部门"  prop="deptId" >
         <!-- 这里是一个bug  dto中的属性名.id get请求是传不到后端的
         因此这里使用的是deptId -->
         <treeselect  style="width: 150px"  v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
       </el-form-item>
      
       <el-form-item label="年度" prop="year">
           <!-- value-format是使用说明格式 -->
        <el-date-picker type="year" value-format="yyyy"  placeholder="选择年度"  v-model="queryParams.year" style="width: 100%;"></el-date-picker>
        </el-form-item>
       
        <el-form-item label="预算编号" prop="buggetCode">
            <el-input
              v-model="queryParams.buggetCode"
              placeholder="请输入预算编号"
              clearable
              style="width: 150px"
              @keyup.enter.native="handleQuery"
            />
        </el-form-item>

        <el-form-item label="预算类别" prop="buggetId">
             <el-select v-model="queryParams.buggetId">
          <!-- :key一般是唯一标识  一般使用唯一的字段
               :label 是显示的值   
               :value是选中后得到的值 -->
                <el-option
                v-for="dict in buggetTypeList"
                :key="dict.id"
                :label="dict.budgetName"
                :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>

         <el-form-item label="状态" prop="flag">
            <el-select v-model="queryParams.flag">
            <el-option label="全部" value="" ></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
            </el-select>
        </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search"   size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>
     <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          v-hasPermi="['aqsc:expenseBudget:add']"
         >新增</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['aqsc:expenseBudget:edit']"
        >编辑</el-button>
        </el-col>
       
         <el-col :span="1.5">
            <el-button
            type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['aqsc:expenseBudget:export']"
            >导出</el-button>
         </el-col>
          <right-toolbar  :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>

 
  
    <!-- ex图待写 -->
    
   <el-row  >
        <el-col :span="8" style="height:350px" >
          <ChartLine  ref="chart_line_one"/> 
        </el-col>
        
        <el-col :span="8"></el-col>
        <el-col :span="8" style="height:350px">
            <ChartLine3  ref="chart_line_one3"/> 
        </el-col>
   </el-row>
    
  

    <el-table v-loading="loading" :data="dangerList" @selection-change="handleSelectionChange">
       <el-table-column type="index" width="50" />
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="所属机构" sortable prop="sysDept.deptName" width="120" />
      <!--  show-overflow-tooltip 当内容过长被隐藏时显示 tooltip-->
      <el-table-column label="年度" prop="year" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="预算编号" prop="buggetCode" width="120"  />
        <!-- 使用dto中的对象中的属性的时候 要对象.属性名-->
      <el-table-column label="预算项目类别" prop="budgetAccount.budgetName" width="120"  />
      <el-table-column label="预算(万元)" prop="buggetMoney" width="120"  />
      <el-table-column label="预算说明" prop="buggetInfo" width="120"  />
      <el-table-column label="负责人" prop="sysUser.userName" width="120"  />
      <!-- ：formatter是进行格式转换  对应写一个方法  进行处理 -->
     <el-table-column label="状态" prop="flag" width="120" :formatter="typeFormatter" />
      
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <!-- 加上 slot-scope="scope"就能取到这个行中的数据了 
            是插槽的意思
            scope.$index获取的当前行的索引
            scope.row是获取当前行的数据对象
            -->
           <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['aqsc:expenseBudget:edit']"
              >修改</el-button>
           </template>
      </el-table-column>
    </el-table>



           <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />




    <!-- 添加或修改角色配置对话框
      是否显示 Dialog，支持 .sync 修饰符 true 显示  false 隐藏
     -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="所属机构" prop="deptId">
          <treeselect style="width:230px" v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
         <el-form-item label="年度" prop="year">
               <el-date-picker style="width:230px"  type="year" value-format="yyyy" placeholder="选择年度"  v-model="form.year" ></el-date-picker>
        </el-form-item>
         <el-form-item label="预算编号" prop="buggetCode">
          <el-input style="width:230px" v-model="form.buggetCode" placeholder="预算编号" />
        </el-form-item>

        <el-form-item label="预算项目类别" prop="buggetId">
              <el-select v-model="form.buggetId" style="width:230px">
                <el-option
                v-for="dict in buggetTypeList"
                :key="dict.id"
                :label="dict.budgetName"
                :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
       
        <el-form-item label="预算金额" prop="buggetMoney" >
          <el-input v-model="form.buggetMoney" placeholder="预算金额" style="width:230px" />
        </el-form-item>
         
        <el-form-item label="预算说明" prop="buggetInfo">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="form.buggetInfo"
            maxlength="500"
            show-word-limit
          />
          </el-form-item>

        <el-form-item label="责任人" prop="userId" >
              <el-select v-model="form.userId" style="width:230px" >
                <el-option
                v-for="dict in userNameList"
                :key="dict.userId"
                :label="dict.userName"
                :value="dict.userId"
                ></el-option>
              </el-select>
        </el-form-item>

        <el-form-item label="附件" prop="annex">
                 <template slot="label">
               
                  文件上传
                </template>
                <!--ref 给上传文件绑定一个ref必要时好清空上传文件数组
                    action 上传地址
                    on change 上传文件发生改变时触发change事件
                    show file list是否显示上传信息列表
                    auto upload 自动上传文件
                    -->
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="#"
                  :on-change="uploadSuccess"
                  :show-file-list="true"
                  :auto-upload="false"
                  :file-list="fileList">
                  <el-button icon="el-icon-upload" slot="trigger" size="small" type="primary">点击上传</el-button>
                </el-upload>
        </el-form-item>


       <el-form-item label="状态" prop="flag">
             <el-radio-group v-model="form.flag">
               <el-radio :label="0">正常</el-radio>
               <el-radio :label="1">停用</el-radio>
              </el-radio-group>
        </el-form-item>
         
        


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
 
  </div>
</template>

<script>
import {test,uploadFile,addUri,listUser, listExpenseBudget, getExpenseBudget, addExpenseBudget, updateExpenseBudget,deptTreeSelect,listBuggetTypeList } from "@/api/aqsc/expenseBudget";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { unzip } from 'zlib';

import ChartLine from './chartLint.vue'
import ChartLine3 from './chartLint3.vue'



export default {


  //数据字典
  dicts: ['sys_normal_disable'],
  name: "danger",
  //组件
  components: { Treeselect ,ChartLine,ChartLine3},
  data() {
    return {
      //第一个图的数据
      Datas1: {},
      //第三个图的数据
      Datas3:[],
      Years3:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
    //   预算类别数据
      buggetTypeList:[],
      //责任人数据
      userNameList:[],
      // 角色表格数据
      dangerList: [],
      // 弹出层标题
      title: "",
        // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      //附件上传使用
     fileList:[],
       // 危险信息源导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/aqsc/expenseBudget/importData"
      },

      // 查询参数
      queryParams: {
        //一般只需要设置一些默认数据即可  
        //一直只是这是 当前页 和每页显示的行数 方便刚打开网页的时候后端进行获取
        pageNum: 1,
        pageSize: 10,
        flag:undefined,
        year:undefined,
      },
      
      // 表单参数
      form: {
        //如果是dto的话要将dto的对象进行定义即可 
        //不定义是取不到的
          sysDept: {
             
          },
          sysUser: {
             
          },
          budgetAccount:{
             
          }
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        sysDept:{
           deptId:[{ required: true, message: "所属机构不能为空", trigger: "blur" }]
        },
       year: [
          { required: true, message: "年度不能为空", trigger: "blur" },
        
        ],
      //  budgetAccount:{
      //     id:[ { required: true, message: "预算项目类别不能为空", trigger: "blur" },]
      //  },
        buggetMoney: [
            { required: true, message: "预算金额不能为空", trigger: "blur" },
           
        ],
        buggetInfo:[
           { required: true, message: "预算说明不能为空", trigger: "blur" },
        ],
        sysUser:{
          userId:[
             { required: true, message: "责任人不能为空", trigger: "blur" }
          ]
        }

      }
    };
  },

   mounted () {
     //统计图的数据赋值
      test().then(response =>{
          this.Datas1=response.data.bzt
        this.Years3=response.data.year
         this.Datas3=response.data.money
         const {Datas1} = this
         const {Datas3} = this
          const {Years3} = this
          this.$refs.chart_line_one.initChart(this.Datas1)
       this.$refs.chart_line_one3.initChart3(this.Years3,this.Datas3)
       
      })      
    },

  created() { 
    //获取分页数据
    this.getList();
    //获取部门数的数据
    this.getDeptTree();
    //获取
    listUser().then(response =>{
      this.userNameList=response.rows
    })
   
    //得到预算类型的方法  ---待写 超
    // listBuggetTypeList().then(response =>{
    //    this.buggetTypeList=response.rows
    // })
   
  },
  methods: {
  // echarts图
    //附件上传
      uploadSuccess(item){
      let formData = new FormData()
      let file = item.raw
      formData.append('file',file)
      uploadFile(formData).then(ret=>{
        this.fileList[0] = ret.data;
        this.form.annex=ret.data.url;
        console.info(this.form.annex)
      
        });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 查询角色列表 */
    getList() {
      //加载开启
      this.loading = true;
      listExpenseBudget(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dangerList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
 

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {

      
      this.form = {
       
       sysDept: {
               
             
          },
       sysUser: {
              
          },
       budgetAccount:{
             
          },
      
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      //先设置当前页为第一页
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据  当选中的是删除和修改的按钮才能变成可选
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const dangerId = row.id || this.ids

      getExpenseBudget(dangerId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        console.info("wwwzq"+JSON.stringify(this.form))
        if (valid) {
          if (this.form.id != undefined) {
            updateExpenseBudget(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList(); 
            });
          } else {
             
            addExpenseBudget(this.form).then(response => {
              
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
         
        }
      });
    },
 
     /** 导出按钮操作 */
    handleExport() {
      this.download('aqsc/expenseBudget/export', {
        ...this.queryParams
      }, `ExpenseBudget_${new Date().getTime()}.xlsx`)
    },
  
   
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
   //状态的转换
   typeFormatter:function(row){
      switch (row.flag) {
                    case 0:
                        return "正常";
                    case 1:
                        return "停用";
                    
                }

   }  

  }
};
</script>