任务复习（三）

交通项目管理主界面，涉及非常多常用的函数功能

表单查询，表格操作，对话框填写，跳转页面，错位通知，表格懒加载，导入导出按钮

<template>
    <div>
      <!-- model是表单数据数据对象 -->
      <el-form ref="queryForm" :model="queryParams" label-width="140px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="主体项目名称：">
              <el-input v-model="queryParams.projectName" placeholder="输入主体项目名称" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主体项目标签：">
              <el-select v-model="queryParams.projectLabel" clearable placeholder="输入主体项目名称">
                <el-option v-for="dict in dict.type.project_label"
                :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划开工时间:">
              <el-date-picker v-model="queryParams.planWorkingTime" 
              type="date" value-format="yyy-MM-dd"
              placeholder="选择日期" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态提醒:" prop="projectLabel">
              <el-select style="width: 100%" clearable v-model="queryParams.type"
                @change="changeData" placeholder="请选择状态提醒">
                <!-- @change 是一个事件监听器 监听select组件变化 当用户选择了不同状态触发changeData（）-->
                <el-option
                  v-for="dict in dict.type.project_reminds"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格 -->
      <!-- 加载树形结构数据 必须要指定row-key load是查询列表子集-->
      <!-- prop对应列内容的字段名 -->
      <el-table 
      :data="trafficList" border row-key="id"
      :load="load" lazy 
      :tree-props="{ children: "children", hasChildren: "hasChild"}"
      >
      <el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
      <el-table-column prop="projectLabel" align="center" label="项目标签">
        <template slot-scope="scope">
          <dict-tag
          :options="dict.type.project_label"
          :value="scope.row.projectLabel"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!-- scope.row 表示从父组件传递过来的当前行数据 -->
          <template v-if="scope.row.auditStatus == null || scope.row.auditStatus == 0">
            <el-button size="mini" type="text" v-if="scope.row.projectSort == 0"
              @click="handleCheck(scope.row)">审核</el-button>
          </template>
          <span v-else>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.hasChild == true"
              @click="goInfo(scope.row)"
              >查看详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-if="
                scope.row.ifAllocate == null || scope.row.ifAllocate == 0
              "
              @click="handleAssign(scope.row)"
              >大队分配</el-button
            >
            <br />
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.hasChild == true"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.hasChild == true"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </span>
        </template>
      </el-table-column>
      </el-table>
      <pagination
        :current.sync="pageNum"
        :total="total"
        :page-size.sync="pageSize"
        @change="getList"
      />
      <!-- 大队分配对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px">
        <el-form ref="form" :model="dialogForm" label-width="80px">
          <el-form-item label="主题项目名称" prop="projectName">
            <el-input v-model="dialogForm.projectName" placeholder="请输入项目名称" clearable/>
          </el-form-item>
          <el-form-item label="主体项目标签：">
            <el-select v-model="dialogForm.projectLabel" placeholder="输入主体项目名称" clearable >
              <el-option v-for="dict in dict.type.project_label"
              :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分配大队:">
            <el-select v-model="dialogForm.deptId" placeholder="请选择大队名称" clearable >
              <el-option v-for="dept in deptNameList"
              :key="dept.deptId"
              :label="dept.deptName"
              :value="dept.deptId"/>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
import {listTraffic,delTraffic, getBattalion, updateTraffic, remindTraffic,} from "@/api/project/traffic.js";
export default {
  name: "traffic",
  dicts: ["project_type", "project_label", "project_progress", "project_reminds"],
   data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectName: "", // 项目名称
          projectType: "", //项目类型
          projectLabel: "", //项目标签
          ownerUnit: "", //业主单位
          buildUnit: "", //承建单位
          constructionLocation: "", //建设地点
          planWorkingTime: "", //计划开工时间
          planEndingTime: "", //计划竣工时间
          type: null, //新增状态提醒字段用于区别提醒信息
        },
        loading: false,
        dialogForm: {},
        form:{},
        trafficList:[],
        total: 0,
        open: false,
        dialogVisible: false, // 控制弹窗显示隐藏的属性
        ids:[] //表格多选数组
        remindList: [],
      }
   },
   created(){
    this.getList();
    this.getBattalion();
    this.$notify.closeAll();
    this.getRemind();
   },
   computed:{
   },
   methods:{
    /** 查询项目列表*/
    getList() {
      listTraffic(this.queryParams).then(response => {
        this.trafficList = response.rows
        this.total= response.total;
        this.loading = false;
      })
    },
    // 查询大队列表
    getBattalionList() {
      getBattalion().then((response) => {
        this.deptNameList = response.data;
      });
    },
    // 重置按钮
    reset() {
      this.form = {
        id: "",
        projectName: "", // 项目名称
        projectType: "", //项目类型
        projectLabel: "", //项目标签
        ownerUnitName: "", //业主单位
        buildUnit: "", //承建单位
        projectProcess: "", //项目进展
        constructionLocation: "", //建设地点
        planWorkingTime: "", //计划开工时间
        planEndingTime: "", //计划竣工时间
        deptNameList: null, //分配大队名称
      }
      this.resetForm("form");// 这个resetForm是什么来头，不定义也能多处使用
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.getList(),
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 查询列表子集
    load(tree, treeNode,resolve) {
      setTimeout(
        // forEach 函数用于遍历数组并对每个元素执行回调函数
        // map函数用于创建一个新的数组来存储结果
        this.trafficList.forEach(item) => {
        resolve([item.children])
      }, 1000)
    },
    //跳转-审核按钮
    handleCheck(row) {
      const id = row.id;
      const params = {"id": id };
      this.$router.push({ path: "/synchronization/traffic/info", query: params})
    },
    //跳转-详情按钮
    goInfo(row) {
      const id = row.id;
      const params = {"id": id };
      this.$router.push({ path: "/synchronization/traffic/info", query: params})
    },
    //跳转-修改按钮
    handleUpdate(row) {
      const id = row.id;
      const params = {"id": id };
      this.$router.push({ path: "/synchronization/traffic/edit", query: params})
    },
    // 跳转-新增按钮
    handleAdd() {
      this.$router.push({ path: "/synchronization/traffic/add" })
    },
    //删除按钮
    handleDelete(row) {
      const ids = row.id;
      // 模态对话框（modal）
      this.$modal.confirm("是否确认删除").then(
        function () {
          return delTraffic(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() =>{})
    },
    //下载模板，导出按钮
    exportProject() {
      this.download(  "project/traffic/export", {
        ...this.queryParams
      },`projectInfo_${new Date().getTime()}.xlsx`);
    },
    // 导入项目信息
    importExcelSuccess(response, file, fileList) {
      if (response.status == 1){
        this.$message({
          message: response.msg,
          type: "success", 
          duration: "3000", //持续时间为3秒
          onClose: () => {
            this.search(); //消息关闭时调用search方法
          }
        });
      } else {
        let str = response.msg;
        //split方法将response.msg按照句号（"。"）进行分割，
        //得到一个数组。然后使用join方法将数组中的元素用换行符（"
        //"）连接起来，并将结果赋值给变量str。
        if (response.msg.split("。")) {
          str = response.msg.split("。").join("<br/>");
        }
        this.$message({
          dangerouslyUseHTMLString: true,// 允许在消息中使用HTML标签。
          message: `<div>${str}</div>`, // 消息的内容是包含在<div>标签内的str变量的值
          type: "error",
          duration: "3000",
        });
      }
    },
    //对话框取消按钮，可清空
    cancel() {
      this.open = false;
      this.resetQuery();
    },
    //对话框提交按钮
    submit() {
      if(this.form.deptId) {
        this.form.ifAllocate = "1";
        this.$refs["dialogForm"].validate((valid) => {
          if (valid) {
            if(this.form.id != null) {
              updateTraffic(this.dialogForm).then((response) => {
                this.$modal.msgSuccess("任务分配成功"); // modal拟态对话框
                this.open = false;
                this.getList();
              });
            }
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "请选择大队!",
        });
      }
    },
    // 获取提醒
    getRemind() {
      remindTraffic().then((response) => {
        this.remindList = response.data;
        if (this.remindList && this.remindList.length > 0) {
          this.openNotify();
        }
      });
    },
    openNotify() {
      this.remindList.forEach((e,index) => {
        let offset = 120 *index;
        if (e.remindLevel == 1) {
          this.$notify.error({
            title: e.projectName + "提醒",
            message:
              "按照合肥市道路交通建设“四同步”工作要求，交通建设附属设施竣工时间不得晚于主体项目竣工时间",
            duration: 0, //持续时间
            offset: offset,
          })
        }
        if (e.remindLevel == 0) {
          this.$notify.info({
            title: e.projectName + "提醒",
            message:
              "按照合肥市道路交通建设“四同步”工作要求，交通建设附属设施竣工时间不得晚于主体项目竣工时间",
            duration: 0,
            offset: offset,
          });
        }
      })
    },
    //查询状态
    changeData(data) {
      this.search = data;
      this.queryParams.type = this.search //查询前先获取表单选择的状态
      this.handleQuery();
      // 这里去判断有多少是灰色的，有多少是红色的（0是灰色，1是红色）
      if(this.search === 0) {
        this.$notify.closeAll(); // 关闭所有通知
        //filter函数创建一个新数组，将符合条件的元素筛选出来，但不需要对全部元素进行更改，因此不用map()
        let result0 = this.remindList.filter((item) => item.remindLevel == 0)
        let sum0 = result0.length;
        this.$notify.info({
          title: "急需录入提醒",
          dangerouslyUseHTMLString: true,
          message: `按照合肥市道路交通建设“四同步”工作要求，<span style="color:red"><b>共有${sum0}个项目急需录入</b></span>交通建设附属设施建设信息`,
          duration: 0,
        });
      }
      if (this.search == 1) {
        this.$notify.closeAll();
        let result1 = this.remindList.filter((item) => item.remindLevel == 1);
        let sum1 = result1.length;
        console.log("循环出来的集合", result1);
        console.log("循环出来的集合长度", result1.length);
        this.$notify.error({
          title:  "超时未录入提醒",
          dangerouslyUseHTMLString: true,
          message: `按照合肥市道路交通建设“四同步”工作要求，<span style="color:red"><b>共有${sum1}个项目已超期请尽快录入</b></span>`,
          duration: 0,
        });
      }
    },
  }
}
</script>
<style lang="scss" scoped>

</style>

关于后退和提交的一些总结

 data() {
      return {
        formRules: {
          name: [
            // trigger当用户在活动名称输入框中输入内容并离开输入框时，会触发这个验证规则。
            //trigger: 'blur' 当输入框失去焦点时触发验证
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      }
   },
   created(){
   },
   mounted() {
      //解决预加载就触发校验,清除表单验证
      this.$nextTick(() => {
          this.$refs["form"].clearValidate()
      })
    },
   methods:{
    //关闭当前打开的页面，并根据指定的路径导航到相应的页面。
    back() {
      // vue.js的事件总线（Event Bus）机制,监听其他组件响应resetQuery事件
      this.$bus.$emit('resetQuery')
      const obj = { path: "/synchronization/traffic/index" };
      //关闭当前打开页面，按照当前指定路径导航
      this.$tab.closeOpenPage(obj);
    },
    back() {
      if (this.$route.query.noGoBack) {
        this.$router.push({ path: '/' }) // 返回根目录（首页
      } else {
        this.$router.go(-1) // 路由后退一步
      }
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if(valid) {
          addTraffic(this.formdata).then(() => {
            this.$message.success("新增成功")
            this.back();
            updateTraffic(this.formchildren,header).then(() => {
            this.$message.success("提交成功",60000);
          })
        }