erp系统抄表管理

<script setup>
import { ref } from 'vue'
import { Delete, Plus, View } from '@element-plus/icons-vue'
import {
  selectAllElectricmeters,
  selectMeterreadingsByMeterId,
  deleteElectricmetersByMeterId,
  insertMeterreadings,
  insertElectricmeters
} from '../../api/people'
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const meter = ref([])
const form = ref({})
const form1 = ref({})
const meterReading = ref([])
const getmeter = async () => {
  const res = await selectAllElectricmeters()
  meter.value = res.data.data
}
getmeter()
const seeRow = async (row) => {
  const res = await selectMeterreadingsByMeterId(row.meterId)
  meterReading.value = res.data.data
  dialogTableVisible.value = true
}
const confirmDeleteRow = async (row) => {
  await deleteElectricmetersByMeterId(row.meterId)
  getmeter()
}
const showDeleteConfirm = async (row) => {
  row.showDeleteConfirm = true
}
const onSubmit = async () => {
  await insertElectricmeters(form.value)
  form.value = {}
  dialogFormVisible.value = false
  getmeter()
}
const AddRow = async (row) => {
  dialogFormVisible1.value = true
  form.value = {}
  form1.value.meterID = row.meterId
}
const onSubmit1 = async () => {
  await insertMeterreadings(form1.value)
  dialogFormVisible1.value = false
  form1.value = {}
}
</script>

<template>
  <el-button type="primary" @click="dialogFormVisible = true">
    电表添加
  </el-button>
  <el-divider />
  <el-dialog v-model="dialogFormVisible" title="电表添加">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="电表标识符(int)">
            <el-input v-model="form.meterId" />
          </el-form-item>
          <el-form-item label="电表号">
            <el-input v-model="form.meterNumber" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="电表安装日期">
            <el-date-picker
              v-model="form.installationDate"
              type="date"
              placeholder="Pick a Date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="电表位置">
            <el-input v-model="form.location"></el-input>
          </el-form-item> </el-col
      ></el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible1" title="抄表记录添加">
    <el-form :model="form1" label-width="120px">
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="抄表日期">
            <el-date-picker
              v-model="form1.readingDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="抄表数值">
            <el-input v-model="form1.readingValue"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="抄表人员姓名">
            <el-input v-model="form1.readerName" />
          </el-form-item>
          <el-form-item label="抄表人员练习方式">
            <el-input v-model="form1.contactNumber" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="onSubmit1"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogTableVisible" title="每月抄表数值">
    <el-table :data="meterReading" stripe style="width: 100%" height="360">
      <el-table-column prop="readingDate" label="抄表日期" />
      <el-table-column prop="readingValue" label="抄表数值" />
      <el-table-column prop="readerName" label="抄表人姓名" />
      <el-table-column prop="contactNumber" label="抄表人练习方式" />
    </el-table>
  </el-dialog>
  <el-card class="box-card" title="电表基础信息表">
    <el-table :data="meter" stripe style="width: 100%" height="360px">
      <el-table-column prop="meterId" label="电表标识符" />
      <el-table-column prop="meterNumber" label="电表号" />
      <el-table-column prop="installationDate" label="电表安装日期" />
      <el-table-column prop="location" label="电表位置" />
      <el-table-column fixed="right" label="操作" width="360">
        <template v-slot="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="seeRow(scope.row)"
            :icon="View"
            >查看每月抄表数值</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="AddRow(scope.row)"
            :icon="Plus"
            >添加抄表记录</el-button
          >
          <el-popover
            :visible="scope.row.showDeleteConfirm"
            placement="top"
            :width="160"
          >
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="small" text @click="cancelDelete(scope.row)"
                >取消</el-button
              >
              <el-button
                size="small"
                type="primary"
                @click="confirmDeleteRow(scope.row)"
                >确认</el-button
              >
            </div>
            <template #reference>
              <el-button
                link
                type="primary"
                size="small"
                :icon="Delete"
                @click="showDeleteConfirm(scope.row)"
                >删除</el-button
              >
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style></style>