return 的使用 及字段拼接 完整的页面布局逻辑实现

于 2022-09-23 12:14:56 发布
阅读量165 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaosi1413/article/details/113879197
版权 
<template>
  <div
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-row type="flex" align="middle">
      <el-col :span="21">
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="4">
            <el-input
              v-model="carNo"
              placeholder="输入车牌号进行查询"
            ></el-input>
          </el-col>
          <el-col :span="4" v-if="this.userTypes == 6 || this.userTypes == 7">
            <el-input v-model="corpName" placeholder="输入公司名称查询">
            </el-input>
          </el-col>
          <el-col :span="4" v-if="this.userTypes == 6 || this.userTypes == 7">
            <el-input
              v-model="chargeStationName"
              placeholder="输入站点名称查询"
            >
            </el-input>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-search"
              @click="getData"
              :disabled="isDisable"
              >搜索</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              :disabled="isDisable"
              type="primary"
              size="small"
              icon="el-icon-refresh-left"
              @click="reset"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3">
        <el-button
          v-if="userTypes == 6 || userTypes == 7"
          :disabled="isDisable"
          type="danger"
          size="small"
          style="margin-left: 20px"
          @click="$router.push('/carTj')"
          >综合统计分析</el-button
        >
      </el-col>
    </el-row>

    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        highlight-current-row
        class="table"
        fit
        height="650"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        ></el-table-column>

        <el-table-column
          v-if="this.userTypes == 6 || this.userTypes == 7"
          width="220"
          label="企业名称"
          prop="corpName"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              {{ scope.row.corpName }}
              <div slot="reference" class="name-wrapper">
                {{ scope.row.corpName }}
              </div>
            </el-popover>
          </template> -->
        </el-table-column>

        <el-table-column
          v-if="this.userTypes == 6 || this.userTypes == 7"
          label="站点名称"
          prop="chargeStationName"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              {{ scope.row.chargeStationName }}
              <div slot="reference" class="name-wrapper">
                {{ scope.row.chargeStationName }}
              </div>
            </el-popover>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="carNo"
          label="车牌号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="货物危险种类"
          align="center"
          :formatter="dangerousTypeColumn"
        >
        </el-table-column>
        <el-table-column
          prop="cargoName"
          label="货物名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="carType"
          label="车型"
          min-width="100"
          align="center"
          :formatter="carTypeColumn"
        ></el-table-column>
        <el-table-column
          prop="effectiveFlag"
          label="有效状态"
          min-width="50"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.effectiveFlag == '1'"
              >有效</el-tag
            >
            <el-tag type="danger" v-if="scope.row.effectiveFlag == '0'"
              >失效</el-tag
            >
            <!-- <span v-if="scope.row.effectiveFlag == '0'">失效</span>
          <span v-if="scope.row.effectiveFlag == '1'">有效</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="popUp(scope.row)">查看</el-button> -->
            <el-button type="primary" @click="popUp(scope.row.id)" size="mini"
              >查看</el-button
            >
            <!-- v-if="lookBut" -->
            <el-button
              @click="deleteRow(scope.row.id)"
              size="mini"
              type="danger"
              :disabled="delDisable"
              v-if="butonShow"
              >删除</el-button
            >
            <el-button
              type="info"
              size="mini"
              @click="carInvalid(scope.row.id, 0)"
              v-if="
                scope.row.effectiveFlag == 1 &&
                (userTypes == 7 || userTypes == 6)
              "
              >失效</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="carInvalid(scope.row.id, 1)"
              v-if="
                scope.row.effectiveFlag == 0 &&
                (userTypes == 7 || userTypes == 6)
              "
              >恢复</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看弹窗 -->
      <!-- <el-dialog title="车辆新增详情" :visible.sync="dialogVisible" width="80%" >
        <carLook  :id="Id" ref="carLookRef" /> 
      </el-dialog> -->
      <carLook :id="Id" v-if="windowing" @close="windowing = false"></carLook>
    </div>
    <div class="bottom_container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNumber"
        :page-sizes="pageSizes"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import carLook from "./carLook";
import carLook from "./carEdit";
export default {
  name: "police",
  components: {
    carLook,
  },
  data() {
    return {
      butonShow: true,
      corpName: "",
      chargeStationName: "",
      // 修改按钮控制
      alertBut: false,
      // 查看按钮空
      lookBut: false,
      delDisable: false,
      userTypes: "",
      windowing: false,
      userModel: "",
      dialogVisible: false,
      loading: false,
      isDisable: false,
      tableData: [],
      //  弹窗数据
      windowsData: [],
      Id: "",
      input: "",
      pageSizes: [10, 15, 20, 40],
      form: {
        pageNumber: 1,
        pageSize: 10,
      },
      carNo: "",
      corpId: "",
      carType: "",
      nuclearLoad: "",
      carPerson: "",
      // 运输证号
      ysId: "",
      // 发动机
      carFdjId: "",
      carPersonPho: "",
      installGps: "",
      total: 10,
      corpName: "",
      //按钮提示
      confirmMsg: "",
      //车辆状态
      value: "",
      options: [
        {
          value: "0",
          label: "失效",
        },
        {
          value: "1",
          label: "有效",
        },
      ],
    };
  },
  created() {
    // this.loading = true;
    this.getData();
    this.userModel = JSON.parse(window.localStorage.getItem("userModel"));
    this.userTypes = this.userModel.userType;
    let then = this;
    if (this.userModel.userType == 7) {
      let authority = this.$route.query.menu.authority;
      if (authority) {
        localStorage.setItem("carLIst", 0);
      }
      var popUp = localStorage.getItem("carLIst");
      if (popUp == 0) {
        then.butonShow = true;
      } else {
        then.butonShow = false;
      }
    }
  },

  methods: {
    //车辆失效功能
    carInvalid(id, type) {
      let that = this;
      if (type == 0) {
        that.confirmMsg = "确定将车辆设置为失效状态吗！！！";
      }
      if (type == 1) {
        that.confirmMsg = "确定将车辆设置为正常状态吗！！！";
      }
      that
        .$confirm(that.confirmMsg, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.isdisable = true;
          this.$axios
            .get(
              this.GLOBAL.myhf + `/car/carInvalid?carId=${id}&type=${type}`,
              {
                withCredentials: true,
              }
            )
            .then(function (response) {
              if (response.data.info === "success") {
                that.isdisable = false;
                that.getData();
                that.$message({
                  message: response.data.msg,
                  type: "success",
                });
              } else {
                that.$message.error(response.data.msg);
              }
            });
        })
        .catch(function (error) {});
    },
    // 分页函数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.form.pageNumber = val;
      this.getData();
    },
    // 弹窗取值函数
    popUp(id) {
      this.Id = id;
      this.windowing = true;
    },
    // 搜索
    getData() {
      let that = this;
      that.loading = true;
      that.isDisable = true;
      axios
        .get(
          this.GLOBAL.myhf +
            "/car/search?carNo=" +
            that.carNo +
            "&pageSize=" +
            that.form.pageSize +
            // 站点名称
            "&chargeStationName=" +
            that.chargeStationName +
            // 公司名称
            "&corpName=" +
            that.corpName +
            "&pageNum=" +
            that.form.pageNumber +
            "&effectiveFlag=" +
            that.value,
          { withCredentials: true }
        )
        .then(function (res) {
          that.isDisable = false;
          that.loading = false;
          // if (res.data.info == "success") {
          if (res.data.info == "success" && res.data.data != null) {
            that.tableData = res.data.data.list;

            that.total = res.data.data.total;
          } else {
            that.isDisable = false;
            that.tableData = null;
            that.total = 0;
          }
        })
        .catch(function (error) {});
    },
    reset() {
      let that = this;
      that.isDisable = true;
      that.loading = true;
      that.carNo = "";
      that.value = "";
      (that.corpName = ""),
        (that.chargeStationName = ""),
        (that.form.pageSize = 10);
      that.form.pageNumber = 1;
      //  setTimeout(() =>{  }, 2000);
      that.getData();
    },
    // 删除方法
    deleteRow(row) {
      let that = this;
      that.delDisable = true;
      this.$confirm("确认要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.delDisable = false;
          axios
            .get(this.GLOBAL.myhf + "/car/logicDel?id=" + row, {
              withCredentials: true,
            })
            .then(function (response) {
              if (response.data.info == "success") {
                that.getData();
                that.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                that.$message.error(response.data.msg);
              }
            });
        })
        .catch(function (error) {
          that.isDisable = false;
          // that.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    dangerousTypeColumn(row, column) {
      switch (row.dangerousType) {
        case "0":
          return "炸品：炸药";
          break;
        case "1":
          return "压缩气体：氧气、氢气";
          break;
        case "2":
          return "易燃液体：汽油、柴油";
          break;
        case "3":
          return "易燃固体";
          break;
        case "4":
          return "氧化物、有机过氧化物";
          break;
        case "5":
          return "有毒物质：氰化物";
          break;
        case "6":
          return "放射性物质";
          break;
        case "7":
          return "腐蚀品：硫酸";
          break;
        case "8":
          return "其他危险品：电池组";
          break;
      }
    },
    carTypeColumn(row, column) {
      if (row.auxiliarycarCarType != "") {
        //有挂车
        let carType = this.getCarType(row.carType);
        switch (row.auxiliarycarCarType) {
          case "0":
            return carType + "、" + "重型普通半挂车";
            break;
          case "1":
            return carType + "、" + "重型罐式半挂车";
            break;
          case "2":
            return carType + "、" + "重型箱式半挂车";
            break;
          case "3":
            return carType + "、" + "重型集装箱半挂车";
            break;
        }
      } else {
        return this.getCarType(row.carType);
      }
    },
    getCarType(type) {
      switch (type) {
        case "0":
          return "轻型厢式货车";
          break;
        case "1":
          return "中型厢式货车";
          break;
        case "2":
          return "中型罐式货车";
          break;
        case "3":
          return "重型罐式货车";
          break;
        case "4":
          return "重型厢式货车";
          break;
        case "5":
          return "重型半挂牵引车";
          break;
        case "6":
          return "低温液体槽罐车";
          break;
        case "7":
          return "罐式危险品运输车";
          break;
        case "8":
          return "易燃液体厢式运输车";
          break;
        case "9":
          return "重型罐式危险品运输车";
          break;
        case "10":
          return "杂项废机油废电瓶厢式运输车";
          break;
        case "11":
          return "毒性和感染性物品厢式运输车";
          break;
        case "12":
          return "爆破器材运输车、烟花爆竹运输车";
          break;
        case "13":
          return "重型普通货车";
          break;
      }
    },
  },
};
</script>
<style scoped>
.table {
  margin-top: 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0 2rem;
}
>>> .el-dialog__header {
  /* width: 100%;
  height: 2rem; */
  background: #72bfff !important;
}
.name-wrapper {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
小四是个处女座
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[python]DIY函数return多个值信息——数据拼接返回
系'辞的博客
02-16 413
前言       本来想利用‘’IQR‘’计算异常值的上、下限，而想diy一个可返回两个数值型的函数。 数组元素拼接 【参考链接】python-numpy数组拼接方法介绍，概括如下：       0.list.append()与list.extend()       1.numpy.append(arr, values, axis
返回函数（拼接字符串）
qq_41988113的博客
03-12 594
描述 实现函数 functionFunction，调用之后满足如下条件： 1、返回值为一个函数 f 2、调用返回的函数 f，返回值为按照调用顺序的参数拼接，拼接字符为英文逗号加一个空格，即 ', ' 3、所有函数的参数数量为 1，且均为 String 类型 示例1 输入： functionFunction('Hello')('world') 复制输出： Hello, world function functionFunction(str) { return f=function(
vue虚拟dom解析字符串标签
Cool_so_cool的博客
08-26 708
遇到的问题：内容渲染页面会出现标签 var vhtml = `<div v-html="${config.defaultValue}"></div>`; //使用地方部分代码 if(config.tag == "desc-text"){ return ( <el-col span={config.span} class={className} nativeOnClick={even
vue树形表格（这是之前写的报错的）
weixin_49393290的博客
10-15 274
效果图
SpringMVC -- SpringMVC的数据响应 页面跳转（直接返回字符串、ModelAndView对象（3种方式)、原始的request对象）
天行健 君子以自强不息，地势坤 君子以厚德载物。
10-24 1754
1. SpringMVC的数据响应 1.1 页面跳转 1.1.1 直接返回字符串 1.1.2 通过ModelAndView对象（3种方式) 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 页面 : {视图解析器前缀} + viewName +{视图解析器后缀} 第一种方式：方法内部创建ModelAndView对象 Model模型：封装数据，View视图：展示数据。 数据获取成功： 第二种方式：方法参数接收ModelAndView对象 运行结
python return逻辑判断表达式实现解析
09-18
主要介绍了python return逻辑判断表达式实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
RecyclerView通过GridLayoutManager实现多样式布局的示例
08-28
今天，我们将讨论如何使用 RecyclerView 通过 GridLayoutManager 实现多样式布局。 首先，让我们了解一下 GridLayoutManager 的基本概念。GridLayoutManager 是 Android 提供的一个 LayoutManager，用于实现网格...
微信网页登录逻辑与实现方法
11-28
微信网页登录逻辑与实现方法是现代网站开发中不可或缺的一部分，因为微信已经成为中国用户的主要社交工具。这个过程涉及几个关键步骤，包括加载微信网页SDK、绘制登录二维码、处理用户扫码后的回调以及在多人协作...
使用Flutter实现一个走马灯布局的示例代码
08-25
在这篇文章中，我们将介绍如何使用 Flutter 实现一个走马灯布局的示例代码，并对其关键点进行详细的分析。 走马灯布局的实现 走马灯布局是一种常见的效果，它可以使当前页面的高度比其它页面高，并在切换页面时...
MVC return几种跳转方法
H_jrqn的博客
05-02 1708
1.通过Redirect()跳转 return Redirect("Index") 默认跳转，跳转至当前Action下的视图 return Redirect("/Home/Index/") 跳转至指定视图 return Redirect("Index?user=admin") 带参数跳转至视图 2.通过RedirectToAction()跳转 return RedirectToAction("Index") 跳转到无参的Index() （如果跳转到本方法就会陷入循环） return Redire
ASP.NET MVC 重点教程一周年版 第五回 ActionResult的其它返回值
重典的博客
03-12 1993
我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件。而它的返回类型是ActionResult如 public ActionResult Index() { return View(); }除了View（）之外那我们这里还能用于返回什么值呢？一、ascx
Flutter--不同样式字符串拼接
weixin_41735943的博客
10-30 3383
Widget textSpan() { return Text.rich(TextSpan( children: [ TextSpan( text: "Home: " ), TextSpan( text: "https://flutterchina.club", style: TextStyle( col.
ReturnJson，让返回数据多一些自定义数据或类名
小白记录
06-29 902
后台代码通过处理后，有些需要的字段无法展示，我这里通过ReturnJson来实现，先上没处理前的代码 但是我需要外层增加一些字段，例如rowcount，errorMsg，success等
读书笔记_Effective C++_条款一：将C++视为一个语言联邦
weixin_30463341的博客
02-24 88
C++起源于C，最初的名称为C with Classes，意为带类的C语言，然而，随着C++的不断发展和壮大，在很多功能上已经远远超越了C，甚至一些C++程序员反过来看C代码会觉得不习惯。 C++可以看成由四个部分组成，分别是： (1) C。C++从语法和代码风格上以C为基础，这也正是C++命名的由来，是在C的基础上++。有意思的是，在《C++ Primer》这本书里有一个问题，问为什么C++...
js中return的用法详解
wrnn123456的博客
09-20 5938
今天给大家讲解的是js中return的用法，从字面意思来看就是返回，官方定义return语句将终止当前函数并返回当前函数的值；可以看下下面的示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function func1(){ ...
字符串拼接代码中诡异的for循环和诡异的return
有無
03-23 867
蛋疼看起了jdk源码，突然发现for循环里的return很诡异。细看才发现这个用法真妙，如此便可每次循环仅做一次判断。比自己平时下的少判断了一次。 public static String toString(Object[] a) { if (a == null) return "null"; int iMax = a.length
对象数组某个字段拼接
最新发布
09-14
要拼接对象数组的某个字段，可以使用数组的`map`方法来遍历数组并获取每个对象的对应字段的值，再使用`join`方法将这些值以逗号分隔拼接成字符串。 例如，给定如下的对象数组： ```javascript const users = [ { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小四是个处女座

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值