index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="运输方式" prop="titleZh">
        <el-select v-model="queryParams.titleZh" clearable style="width: 200px">
          <el-option label="海运拼柜" value="海运拼柜"></el-option>
          <el-option label="专线空运" value="专线空运"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="基础单位" prop="fuhao">
        <el-input
          v-model="queryParams.fuhao"
          placeholder="请输入基础单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item v-show="false">
        <Treeselect v-model="id" :options="listTree"> </Treeselect>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @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="['report:vz:create']"
        >
          {{ $t("新增") }}</el-button
        >
        <el-button type="primary" @click="test" v-show="false">测试</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-show="false"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['my:test:export']"
        >
          {{ $t("导出") }}</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          v-show="false"
          size="mini"
          @click="TestFun"
        >
          {{ $t("测试功能") }}</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="运输方式" align="center" prop="titleZh" />
      <el-table-column label="基础单位" align="center" prop="fuhao" />
      <el-table-column label="V值" align="center" prop="vz" width="100">
      </el-table-column>
      <el-table-column label="修改日期" align="center" prop="updateTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['report:vz:update']"
          >
            {{ $t("修改") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['report:vz:delete']"
          >
            {{ $t("删除") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="运输方式" prop="titleZh">
          <el-select
            v-model="form.titleZh"
            @change="handleSelectChange"
            clearable
            style="width: 200px"
          >
            <el-option label="海运拼柜" value="海运拼柜"></el-option>
            <el-option label="专线空运" value="专线空运"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="1V=" prop="vz">
          <el-input v-model="form.vz" placeholder="" style="width: 100px" />
          <el-input
            v-model="form.fuhao"
            style="width: 100px"
            placeholder="基础单位"
            readonly="true"
          />
        </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 {
  create,
  update,
  del,
  getModel,
  getPageList,
  exportExcel,
  test,
} from "@/api/report/vz";
import Treeselect from "@riophae/vue-treeselect";
import "@/assets/styles/vue-treeselect.css";
//弹出消息框
import { MessageBox } from "element-ui";
//日期库函数
import dayjs from "dayjs";
import { getToken } from "@/utils/auth";

//2024-05-01合并
export default {
  name: "vz",
  components: {
    Treeselect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 测试列表
      list: [],
      // 弹出层标题
      title: "",
      //是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        titleZh: null, //运输方式
        fuhao: null, //基础单位
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        vz: [
          {
            required: true,
            message: this.$t("V值不能为空"),
            trigger: "blur",
          },
        ],
      },
      id: 1,
      listTree: [
        {
          //https://www.cnblogs.com/javahr/p/13607024.html
          id: 1,
          label: "1",
          children: [
            {
              id: 11,
              label: "11",
              children: [
                {
                  id: 111,
                  label: "111",
                },
              ],
            },
            {
              id: 12,
              label: "12",
            },
          ],
        },
        {
          id: 2,
          label: "2",
          children: [
            {
              id: 21,
              label: "21",
            },
            {
              id: 22,
              label: "22",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectChange(sValue) {
      if (sValue == "海运拼柜") {
        this.form.fuhao = "M3";
      } else if (sValue == "专线空运") {
        this.form.fuhao = "KG";
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      // 执行查询
      getPageList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        titleZh: undefined, //运输方式
        fuhao: undefined, //基础单位
        vz: undefined, //v值
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加V值";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id;
      getModel(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改V值";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }

        // 修改的提交
        if (this.form.id != null) {
          update(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        create(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm("是否确认删除选中数据项?")
        .then(function () {
          return del(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    test() {
      //单元测试函数
      /*
      var p = 12;
      test(p).then((response) => {
        this.$modal.msgSuccess("测试成功");
      });*/
      var s = getToken();
      alert(s);
    },
    TestFun() {
      var bR = dayjs("2024-05-11").isBefore(dayjs("2024-05-12"));
      alert(bR);

      //获取当前日期
      var now = dayjs().format("YYYY-MM-DD dddd HH:mm:ss.SSS A");
      MessageBox(now);
      //dayjs("2019-01-25").toArray(); // [ 2019, 0, 25, 0, 0, 0, 0 ]
      var dJs = dayjs("2019-01-25").toJSON(); //'2019-01-25T02:00:00.000Z'
      //MessageBox(dJs);
      //dayjs 使用的相关参考
      //https://segmentfault.com/a/1190000040835957?sort=newest
      //https://dayjs.fenxianglu.cn/category/plugin.html#advancedformat
      //年 ： dayjs().year()
      //月 ： dayjs().month()
      //日 ： dayjs().date()
      //星期 ： dayjs().day()
      //时 ： dayjs().hour()
      //分 ： dayjs().minute()
      //秒 ： dayjs().second()
      //毫秒 ： dayjs().millisecond()

      //调用后台函数
      /*
      test().then((response) => {
        this.$modal.msgSuccess("测试发送");
      });*/
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      // 执行导出
      this.$modal
        .confirm("是否确认导出所有测试数据项?")
        .then(() => {
          this.exportLoading = true;
          return exportExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, "${table.classComment}.xls");
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>