sepax-products-web/src/views/toolbox/warning.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px">
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="工具箱操作日志" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">

          </div>
          <slot>
            <div>
              <Select v-model="model1" style="width:150px" placeholder="工具箱">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <DatePicker type="datetimerange" placeholder="选择时间范围" style="width: 300px;margin-left:10px;"></DatePicker>
              <Input style="width: 200px; margin-left: 10px" v-model.number="searchFields.Name" placeholder="关键词搜索" />
              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
              <Button icon="md-cloud-download" style="margin-left: 10px" type="primary">导出</Button>
            </div>
          </slot>
        </LxHeader>
      </div>

      <!-- table数据 -->
      <!-- :max-height="450" -->
      <LxTable ref="table" :loadKey="true" :columns="columns" :pagination-hide="false" :height="tableHeight"
        :tableData="data" :index="true" @loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></LxTable>
    </div>

  </div>
</template>
<script>
  import LxTable from "@/components/LxTable/index.vue";
  import LxHeader from "@/components/LxHeader/index.vue";
  export default {
    components: {
      LxTable,
      LxHeader
    },
    created() {
      this.initLoad();
    },
    mounted() {},
    data() {
      return {
        options: [{
          value: '1',
          label: '1楼'
        }, {
          value: '2',
          label: '2楼'
        }, ],
        dialogFormVisible: false,
        form: {
          name: "",
          region: ""
        },
        formLabelWidth: "120px",
        tableHeight: 0,
        //查询条件字段
        searchFields: {
          CreateDate1: "",
          CreateDate2: "",
          UserName: "",
        },
        //url: "api/App_Transaction/getPageData", //后从加载数据的url
        data: [
          
        ],
        columns: [{
            field: "Id",
            title: "主键ID",
            type: "int",
            width: 90,
            hidden: true,
            readonly: true,
            require: true,
          }, {
            field: "Name",
            title: "工具箱",
            type: "string",
            width: 90,
            require: true,
          },
          {
            field: "Name",
            title: "预警时间",
            type: "string",
            width: 90,
            require: true
          },
          {
            field: "PhoneNo",
            title: "接收人",
            type: "string",
            link: true,
            width: 100,
            require: true,
          },
          {
            field: "Quantity",
            title: "接收电话",
            type: "int",
            width: 80,
            require: true,
          },
          {
            field: "Quantity",
            title: "短信发送时间",
            type: "int",
            width: 80,
            require: true,
          },
          {
            field: "Quantity",
            title: "短信发送状态",
            type: "int",
            width: 80,
            require: true,
          },
          {
            field: "Quantity",
            title: "微信发送",
            type: "int",
            width: 80,
            require: true,
          },
          {
            field: "操作",
            title: "操作",
            width: 120,
            render: this.getRender()
          },
        ],
      };
    },
    methods: {
      initLoad() {
        var that = this;
        var clientHeight = document.documentElement.clientHeight
        var lxHeader_height = 96.5; //查询 头部
        var paginationHeight = 37; //分页的高度
        var topHeight = 50; //页面 头部
        let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
        that.tableHeight = tableHeight;
      },
      edit() {
        this.dialogFormVisible = true;
      },
      //点击查询时生成查询条件
      loadTableBefore(param, callBack) {
        //此处是从后台加数据前的处理，自己在此处自定义查询条件,查询数据格式自己定义或参考代码生成器查询页面请求的数据格式
        console.log("加载数据前" + param);
        //生成查询条件
        param.wheres = [
          //设置为like模糊查询
          {
            name: "Name",
            value: this.searchFields.Name,
            displayType: "like"
          },
          //设置日期查询>=、<=
          {
            name: "CreateDate",
            value: this.searchFields.CreateDate1,
            displayType: "thanorequal",
          },
          {
            name: "CreateDate",
            value: this.searchFields.CreateDate2,
            displayType: "lessorequal",
          },
        ];
        callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
      },
      loadTableAfter(data, callBack) {
        //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
        console.log("加载数据后" + data);
        callBack(true); //同上
      },
      load() {
        //此处可以自定义查询条件,如果不调用的框架的查询，格式需要自己定义，
        //如果查询的是框架getPageData方法,需要指定格式,如:
        // let where={wheres:[{"name":"UserTrueName","value":"教兽",displayType:"text"}]};
        let where = {};
        this.$refs.table.load(where);
      },
      del() {
        let rows = this.$refs.table.getSelected();
        if (rows.length == 0) {
          return this.$message.error("请先选中行");
        }
        this.delClick();
        //   this.$refs.table.delRow();
        //此处可以接着写删除后台的代码
      },
      getRows() {
        let rows = this.$refs.table.getSelected();
        if (rows.length == 0) {
          return this.$message.error("请先选中行1");
        }
        let text = "当前选中的行数据：" + JSON.stringify(rows);

        this.$Message.info(text);
      },
      delClick(row) {
        //删除
        let tigger = false;
        this.$Modal.confirm({
          title: "删除警告!",
          content: "确认要删除选择的数据吗?",
          onOk: () => {
            if (tigger) return;
            tigger = true;
            let url = this.getUrl(this.const.DEL);
            this.http.post(url, [row.Id], "正在删除数据....").then((x) => {
              if (!x.status) return this.$error(x.message);
              this.$success(x.message);
              this.refresh();
            });
          }, //, onCancel: () => {}
        });
      },
      getRender() {
        return (h, {
          row,
          column,
          index
        }) => {
          return h("div", {
            style: {}
          }, [
            h(
              "a", {
                props: {

                },
                style: {
                  "border-bottom": "1px solid"
                },
                on: {
                  click: (e) => {
                    e.stopPropagation();
                    this.delClick(row);
                  },
                },
              },
              "查看"
            ),

          ]);
        };
      },
    },
  };
</script>