rep固定资产界面

.

<script setup>
import { ref } from 'vue'
import { Upload, View } from '@element-plus/icons-vue'
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const dialogTableVisible = ref(false)

const form = ref({})
const form1 = ref({})
const assetRecord = ref([])
const assets = ref([])

import { selectAllAssets } from '../../api/people'
const getAssets = async () => {
  const res = await selectAllAssets()
  assets.value = res.data.data
}
getAssets()

import {
  insertAssets,
  selectAssetsByAssetId,
  updateAssets,
  selectRecordsByAssetId
} from '../../api/zi'
const onSubmit = async () => {
  await insertAssets(form.value)
  dialogFormVisible.value = false
  form.value = ''
  getAssets()
}
const updateRow = async (row) => {
  const res = await selectAssetsByAssetId(row.assetId)
  form1.value = res.data.data
  dialogFormVisible1.value = true
}
const onSubmit1 = async () => {
  await updateAssets(form1.value)
  dialogFormVisible1.value = false
  form1.value = ''
  getAssets()
}
const seeRow = async (row) => {
  const res = await selectRecordsByAssetId(row.assetId)
  assetRecord.value = res.data.data
  dialogTableVisible.value = true
}
</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.assetId" />
          </el-form-item>
          <el-form-item label="资产名称">
            <el-input v-model="form.assetName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="购买日期">
            <el-date-picker
              v-model="form.purchaseDate"
              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.purchaseCost"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col>
          <el-form-item label="当前价值">
            <el-input v-model="form.currentValue" />
          </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 :span="12">
          <el-form-item label="资产标识符(int)">
            <el-input v-model="form1.assetId" disabled />
          </el-form-item>
          <el-form-item label="资产名称">
            <el-input v-model="form1.assetName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="购买日期">
            <el-date-picker
              v-model="form1.purchaseDate"
              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="form1.purchaseCost"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col>
          <el-form-item label="当前价值">
            <el-input v-model="form1.currentValue" />
          </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="assetRecord" stripe style="width: 100%" height="360">
      <el-table-column prop="recordId" label="维修编号" />
      <el-table-column prop="assetId" label="资产标识符" />
      <el-table-column prop="maintenanceDate" label="维修日期" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="cost" label="维修费用" />
    </el-table>
  </el-dialog>
  <el-card class="box-card">
    <el-table :data="assets" stripe style="width: 100%" height="360px">
      <el-table-column prop="assetId" label="资产标识符" />
      <el-table-column prop="assetName" label="资产名称" />
      <el-table-column prop="purchaseDate" label="购买日期" />
      <el-table-column prop="purchaseCost" label="购买成本" />
      <el-table-column prop="currentValue" label="当前价值" />
      <el-table-column fixed="right" label="操作" width="240">
        <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"
            :icon="Upload"
            @click.prevent="updateRow(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<style></style>