jiahe_device/src/views/limsConfig/hjRequest.vue

  <!-- 环境数据要求或记录表 -->
  <!-- 检测依据表 -->
<template>
  <basic-container>
    <!-- <el-card style="height:300px;">
      <VueEcharts style="width: 100%; height:300px" :option="linear"></VueEcharts>
    </el-card> -->
    <search :searchForm="searchForm" @searchHandle="searchHandle"/>
    <avue-crud
      id="avue-id"
      ref="crud"
      :option="option"
      :data="data"
      :page="page"
      :table-loading="loading"
      @on-load="onLoad"
      @row-save="rowSave"
      @search-change="searchChangeScope"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @refresh-change="refresh"
      @selection-change="selectionChange"
    >
      <template slot-scope="{row,index}" slot="menu">
        <el-button class="look" size="small" @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
        <el-button class="look" size="small" @click="$refs.crud.rowDel(row,index)">删除</el-button>
      </template>    
      <!-- <template slot="menuLeft">
        <el-button size="small" class="search" style="position: absolute;right:0;" @click="addHandle" >新 增</el-button> 
      </template> -->
      <!-- 弹框内按钮 -->
      <template slot-scope="{type}" slot="menuForm">
        <el-button size="small" @click="$refs.crud.closeDialog()" class="button-el">取消</el-button>
        <el-button v-if="type=='add'"  size="small" class="button-el" @click="$refs.crud.rowSave()" >提交</el-button>
        <el-button v-if="type=='edit'" size="small" class="button-el" @click="$refs.crud.rowUpdate()" >提交</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { insert, deleteByIds, update, list } from "../../api/lims/envLog";
import { detail } from '@/api/system/param.js'
export default {
  data() {
    return {
      loading: false,
      page: [
        {
          current: 1, //当前第几页
          total: 1, //总页数
          size: 10, //每一页加载多少数据
        },
      ],
      // 搜索
      searchForm: {
        name: "",
      },
      option: {
        selection: true,
        index: true,
        labelPosition: "top",
        labelSuffix: " ", //控制标题后缀
        labelWidth: 120,
        border: false,
        gutter: 60, //设置input的大小
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        menuPosition: "left",
        tree: true,
        menuBtn: false,
        menu:false,
        editBtn:false,
        delBtn: false,
        addBtn:false,
        submitBtn: false,
        searchBtn:false,
        emptyBtn:false,
        columnBtn: false,
        refreshBtn: false,
        tip: false,
        saveBtn:false,
        cancelBtn:false,
        dialogWidth: 920,
        updateBtn:false,
        header:false,
        dialogCustomClass:"custom",
        addTitle:"新增",
        column: [
          // {
          //   // width:130,
          //   type: "input",
          //   span: 8,
          //   label: "id",
          //   prop: "Id",
          // },
          {
            type: "input",
            span: 8,
            label: "字典编码",
            prop: "dicCode",
            overHidden:true
          },
          {
            type: "select",
            label: "类型",
            overHidden:true,
            dicData: [
              {
                label: "温度",
                value: '0',
              },
              {
                label: "湿度",
                value: '1',
              },
            ],
            span: 8,
            display: true,
            prop: "type",
          },
          {
            type: "input",
            span: 8,
            label: "记录人",
            prop: "recorder",
            overHidden:true
          },
          {
            type: "datetime",
            span: 8,
            label: "记录时间",
            prop: "recordTime",
            display: true,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            overHidden:true
          },
          {
            type: "input",
            span: 8,
            label: "采集位置",
            prop: "collectPlace",
            overHidden:true
          },
          {
            type: "input",
            span: 8,
            label: "坏境参数名称",
            prop: "name",
            overHidden:true
          },
          {
            type: "input",
            label: "环境值",
            span: 8,
            prop: "value",
            overHidden:true
          },
        ],
        group: [
          {
            //为新增的添加  配置数据
            headerAlign: "center",
            align: "center",
            menuPosition: "center",
            prop: "a165344452805342299",
            arrow: false,
            collapse: true,
            display: true,
            // column: [
            //   {
            //     type: "input",
            //     label: "编号",
            //     span: 7,
            //     display: true,
            //     prop: "a16534445487483112",
            //   },
            // ],
          },
        ],
      },
      data: [
        {
          //全局数据
          Id: "1",
          serial: "检测编号",
          name: "样品管理员",
          ypname: "样品名称",
          number: "样品数量",
          Date: "保留期（A->B）",
          suggest: "管理员处理建议",
          glyday: "管理员建议日期",
          sprsuggest: "审批人建议",
          sprday: "审批人建议日期",
          principal: "技术负责人",
        },
      ],
      timeArr:[]
    };
  },
  methods: {
    // // 新增
    // addHandle() {
    //   this.$refs.crud.rowAdd();
    // },
    onLoad(page, param = {}, loading) {
      //dow加载完毕后触发
      //模拟分页
      this.$set(this.page, 0, page);
      this.loading = true;
      list(
        Object.assign({ current: page.currentPage, size: page.pageSize }, param)
      ).then((res) => {
        console.log(res);
        this.data = res.data.data.records;
        let arr = []
        this.data.forEach(item => {
          arr.push(item.createTime.substr(0,10))
        })
        this.timeArr = arr
        // position1
        this.page[0].total = res.data.data.total;
        this.loading = false;
      });
      
    },
    //搜索
    searchHandle(item, index) {
      if (index === 1) {
        this.searchForm = {
          name: "",
        };
        this.onLoad(this.page[0]);
      } else {
        this.onLoad(this.page[0], item);
      }
    },
    //查找分页
    searchChangeScope(params, done) {
      this.onLoad(this.page[0]);
      done();
    },
    selectionChange(list) {
      console.log(list.id);
    },
    toggleSelection(val) {
      console.log("aaa");
    },
    //新增
    rowSave(from, done, loading) {
      console.log(from);
      insert(from)
        .then((res) => {
          this.onLoad(this.page[0]);
        })
        .then(() => {
          this.$message.success("新增成功");
        });
      done();
    },
    refresh(val) {
      console.log("刷新回调");
    },
    //删除
    rowDel(form, index) {
      this.$confirm("此操作会删除该数据，且无法恢复，确定要删除吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteByIds(form.id).then((res) => {
          console.log(res);
          this.$message.success("删除成功");
          this.onLoad(this.page[0]);
        });
      });
    },
    //修改
    rowUpdate(row,done,loading) {
      console.log(row);
      update(row).then((res) => {
        this.onLoad(this.page[0]);  
        this.$refs.crud.closeDialog() 
      });
    },
  },
  computed: {
  linear() {
    return {
      xAxis: {
        type: 'category',
        data: this.timeArr
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        top: '10%',
        left: '5%',
        right: '5%',
        bottom: '10%',
        containLabel: true
      },
      series: [
        {
          data: this.data.map(v => v.value),
          type: 'line'
        }
      ]
    }
  }
}
};
</script>

<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom: 1px solid #f0f3f7;
}
::v-deep .avue-crud .el-table th{
  color: #999999;
  font-weight: 400;
  background: #f6f8fa;
  height: 66px;
}
::v-deep .avue-crud .el-table td{
  height: 66px;
  color: #333333;
}
::v-deep .el-table .el-table__cell.is-center{
  text-align: left;
}
::v-deep .el-table__row .el-button--default, .el-table__row .el-button--text{
  background-color: #fff !important;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner{
  height: 20px;
}
// 分页位置
::v-deep .avue-crud__pagination{
 padding: 10px 0 35px 40px !important;
}
.search {
  color: #fff;
  background-color: #1E60F5;
  border-color: #1E60F5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left:18px!important;
  margin-right: 0!important;
}

// 取消
.button-el {
  color: #999999;
  background-color: #fff;
  border-color: #e4e7ec;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
// 确定
.button-el:hover {
  color: #fff;
  background-color: #1e60f5;
  border-color: #1e60f5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
::v-deep.avue-crud__menu{
  width: 0;
  min-height: 0;
  margin: 0;
}
</style>