jonhon-mes-web/src/views/recorderList/index.vue

<template>
  <basic-container>
    <!-- 记录仪管理 -->
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="记录仪" name="recorder"></el-tab-pane>
      <el-tab-pane label="记录仪曲线配置" name="recorderLineSetting"></el-tab-pane>
      <el-tab-pane label="记录仪历史曲线" name="recorderHistoryLine"></el-tab-pane>
    </el-tabs>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
      @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template #menu="{ row, index, size }">
        <el-button type="text" @click="showDetail(row)">明细</el-button>
        <el-button type="text" @click="rowEdit(row, index)">修改</el-button>
        <el-button type="text" @click="deleteRow(row)">删除</el-button>
      </template>
      <template #menu-left>
        <el-button type="primary" icon="el-icon-setting" @click="setCycle">打包周期配置</el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body title="详情" width="80%" v-model="detailDialog">
      <avue-crud :option="detailOption" :table-loading="detailLoading" :data="detailData" v-model="detailForm"
        v-model:page="detailPage" ref="crud" @current-change="currentChange" @size-change="sizeChange">
      </avue-crud>
    </el-dialog>
    <el-dialog append-to-body title="打包周期配置" v-model="settingDialog">
      <el-form ref="setForm" :model="setForm" :rules="setRules" label-width="120px">
        <el-form-item label="记录仪打包周期" prop="cpcQuantity">
          <!-- <el-input placeholder="请输入记录仪打包周期" v-model="setForm.cpcQuantity"></el-input> -->
          <el-input-number v-model="setForm.cpcQuantity" controls-position="right" @change="handleChange" :min="1" ></el-input-number>
        </el-form-item>
        <el-form-item prop="cpcUnit">
          <el-radio-group v-model="setForm.cpcUnit" size="small">
            <el-radio label="1" border>年</el-radio>
            <el-radio label="2" border>月</el-radio>
            <el-radio label="3" border>日</el-radio>
            <el-radio label="4" border>时</el-radio>
            <el-radio label="5" border>分</el-radio>
            <el-radio label="6" border>秒</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitCycle">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import recorderColumnData from './js/recorderColumnData';
export default {
  data() {
    return {
      tabPosition: 'recorder',
      loading: false,
      data: [],
      form: {},
      detailDialog: false,
      detailData: [],
      settingDialog:false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      setForm:{},
      setRules:{
        cpcQuantity:[{required:true,message:'请输入记录仪打包周期',trigger:'blur'}]
      },
      option: {
        columnSort: true,
        tip: false,
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: ' ',
        addBtn: true,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        column: [
          
        ]
      },
      detailOption: {
        columnSort: true,
        tip: false,
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: false,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        column: [
          {
            label: '记录仪',
            prop: 'recorder',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
          {
            label: '使用时间',
            prop: 'recordDate',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
          {
            label: '数据信息',
            prop: 'memo',
            span: 24,
            labelWidth: 140,
            addDisplay: false,
            editDisplay: false,
            overflow: true,
          },
        ]
      },
      detailPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      detailForm: {},

    }
  },
  mounted() {
    this.option.column = recorderColumnData[this.tabPosition]
  },
  methods: {
    // tab切换
    tabPositionChange(val){
      this.option.column = recorderColumnData[this.tabPosition]
    },
    rowEdit (row, index) {
        this.$refs.crud.rowEdit(row, index);
    },
    showDetail(row) {
      this.loadData()
      this.detailDialog = true
    },
    setCycle(){
      this.settingDialog = true
    },
    deleteRow(){
      this.$confirm('确定删除本条数据?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {

        })
    },
    submitCycle(){
      this.$refs.setForm.validate(valid => {
        if (valid) {
          this.settingDialog = false
        }
      })
    },
    loadData() {
      this.detailData = [
        { recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
        { recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
        { recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
        { recorder: '1302022', recordDate: '2025-07-26 16:04:43' },
      ]
      this.detailPage.total = this.detailData.length
    },
    onLoad() {
      this.data = [
        { crtCode: '001', memo: '' },
        { crtCode: '002', memo: '' },
        { crtCode: '003', memo: '' },
      ]
    }
  }
}
</script>

<style></style>