logpm_page/src/views/datadetail/ToolUpdate.vue

<template>
<!-- 表格组件 -->
   <div class='el-content-el' ref='TabHeight'>
    <!-- 顶部开始 -->
    <div class="el-Cart-button">
      <!-- 表格顶部左侧按钮 -->
      <div class="el-Cart-button-left">
            <el-button  type="primary" @click="AddInfo"><el-icon><Plus /></el-icon>新 增</el-button>
            <el-button @click="handleDelete"><el-icon><Delete /></el-icon>删 除</el-button>
            <el-button @click="handleDelete"><el-icon><Edit /></el-icon>查看维修记录</el-button>
      </div>
      <!-- 表格顶部右侧按钮 -->
      <div class="el-Cart-button-right">
        <!-- 刷新按钮 -->
        <button>
          <el-icon color="#ccc"><Refresh /></el-icon>
        </button>
        <!-- 功能按钮 -->
        <button>
          <el-icon color="#ccc"><Operation /></el-icon>
        </button>
        <!-- 搜索按钮 -->
        <button>
          <el-icon color="#ccc"><Search /></el-icon>
        </button>
      </div>
    </div>
    <!-- 顶部结束 -->
    <div class='el-Cart'>
      <!-- 表格列开始 -->
      <el-table :data="data" border  :height="TabHeight+'px'" style="width: 100%;">
      <el-table-column type="selection" width="55" fixed="left"/>
      <el-table-column type="index" fixed="left" width="50" height="100" label="#" align="center"/>
      <el-table-column prop="name" label="产品名称" width="180" align="center " sortable/>
      <el-table-column prop="model" label="型号" width="180" align="center " />
      <el-table-column prop="purchaseAmount" label="购买金额" width="180"  align="center "/>
      <el-table-column prop="state" label="状态" width="180"  align="center "/>
      <el-table-column prop="currentUsageWarehouse" label="当前使用仓" width="180"  align="center "/>
      <el-table-column prop="user" label="使用人" width="180" align="center " />
      <el-table-column prop="deviceSerialNumber" label="设备序列号S/N" width="180" align="center "/>
      <el-table-column prop="userPosition" label="使用人岗位" width="180" align="center "/>
      <el-table-column prop="isDeposit" label="是否收取押金" width="180" align="center "/>
      <el-table-column prop="deposit" label="押金金额(元)" width="180" align="center "/>
      <el-table-column prop="purchasingCompany" label="采购公司" width="180" align="center "/>
        <el-table-column label="商品图片" width="180" align="center"  >
          <template #default="props">
              <img  :src="props.row.photo" class='el-Img'>
        </template>
      </el-table-column>
      <el-table-column prop="buyingTime" label="购买时间" width="180" align="center "/>
      <el-table-column prop="notes" label="备注" width="180" align="center "/>
      <el-table-column prop="warrantyPeriodEndTime" label="保修截止时间" width="180" align="center "/>
      <el-table-column fixed="right" label="操作" width="280" align="center ">
        <template #default>
          <el-button link type="primary" icon="el-icon-delete"  @click="handleDelete">删除</el-button>
          <el-button link type="primary" icon="el-icon-view"    @click="handleEdit(row)">编辑</el-button>
          <el-button link type="primary" icon="el-icon-view"    @click="handleview(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格翻页功能 -->
    <div class="demo-pagination-block">
      <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageList"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="2"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      />
    </div>

  </div>
  <!-- 弹窗组件 -->
  <div class='addlalog'>
    <el-dialog v-model="AddLalog" title="新增产品" >
    <el-form  label-position="top" label-width="100px" :model="AddForm">
    <el-form-item label="产品名称">
      <el-input v-model="AddForm.name"  placeholder="请输入产品名称"/>
    </el-form-item>
    <el-form-item label="购买金额">
      <el-input v-model="AddForm.purchaseAmount" placeholder="请输入购买金额"/>
    </el-form-item>
    <el-form-item label="当前使用仓">
      <el-input v-model="AddForm.currentUsageWarehouse" placeholder="请输入当前使用仓"/>
    </el-form-item>
    
    <el-form-item label="设备序列号S/N">
      <el-input v-model="AddForm.deviceSerialNumber" placeholder="请输入设备序列号" />
    </el-form-item>
    
    <el-form-item label="是否收取押金">
        <el-select v-model="AddForm.isDeposit" class="m-2" placeholder="选择是否收取押金">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </el-form-item>
    
    <el-form-item label="采购公司">
      <el-input v-model="AddForm.purchasingCompany" placeholder="请输入采购公司"/>
    </el-form-item>
      <el-form-item label="保修截至时间">
        <el-date-picker
        v-model="AddForm.warrantyPeriodEndTime"
        type="date"
        placeholder="选择保修截至日期"
        size="default"
        format="YYYY/MM/DD"
      />
    </el-form-item>
    <el-form-item label="图片">
    <!-- photo -->
        <el-upload
    ref="uploadRef"
    class="upload-demo"
     action="api/blade-resource/oss/endpoint/put-file"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  > 

    <template #trigger>
      <div class='img-icon'>
      <el-button type="primary">点击上传图片</el-button>
       <el-icon><UploadFilled /></el-icon>
      </div>
    </template>
    </el-upload>
    </el-form-item>

    <el-form-item label="型号">
      <el-input v-model="AddForm.model" placeholder="请输入型号"/>
    </el-form-item>

          <el-form-item label="状态">
        <el-select v-model="AddForm.state" class="m-2" placeholder="选择状态">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </el-form-item>

    <el-form-item label="使用人">
      <el-input v-model="AddForm.user"  placeholder="请输入使用人"/>
    </el-form-item>

          <el-form-item label="使用人岗位">
      <el-input v-model="AddForm.userPosition" placeholder="请输入使用人岗位"/>
    </el-form-item>

    <el-form-item label="押金金额(RMB)">
      <el-input v-model="AddForm.deposit" placeholder="请输入押金金额(元)" />
    </el-form-item>

    <el-form-item label="购买时间">
      <el-date-picker
        v-model="AddForm.buyingTime"
        type="date"
        placeholder="选择购买日期"
        size="default"
        format="YYYY/MM/DD"
      />
    </el-form-item>

    <el-form-item label="备注">
      <el-input v-model="AddForm.notes"  placeholder="请输入备注"/>
    </el-form-item>
  </el-form>
<!-- 弹窗底部提交按钮 -->
  <div class='el-dialog-button'>
   <el-button type="danger" @click="submit">
    <el-icon><Select/></el-icon>
         确认提交
    </el-button>
  </div>
  </el-dialog>
  </div>
  <!-- 弹窗结束 -->
</div> 
</template>

<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue';
import { getList, getDetail, add, update, remove,$_TableList } from '@/api/basic/basicPda'; //API
import { ElMessage, type UploadProps } from 'element-plus'
const currentPage = ref(1); // 默认页码
const pageSize = ref(30); // 默认每一页几条
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
const small = ref(false);
const background = ref(true); // 是否开启背景颜色
const disabled = ref(false); // 是否禁止使用页码功能
const data = ref([]); // 表单数据
const TabHeight = ref();//动态获取表格高度
const AddLalog = ref(false)//提交弹窗
const AddForm = ref({
  name: '',
  region: '',
  type: '',
})
const value1 = ref('') //日期
const optionsvalue = ref('')//下拉框值
const optionsvalue2=ref('')//状态值
const uploadRef = ref()//图片上传
const options = [//下拉选择框
  {
    value: '0',
    label: '是',
  },
  {
    value: '1',
    label: '否',
  },

]
const options2 = [//下拉选择框
  {
    value: '1',
    label: '正常',
  },
  {
    value: '2',
    label: '维修',
  },
  {
    value: '3',
    label: '不能使用(不能开机)',
  },
]
// 获取表格数据
function onLoad(){
    // 获取表格数据API（$_TableList）
    $_TableList({ current:currentPage.value, size: pageSize.value }).then(res=>{
    console.log(res.data.data.records);
    //表格信息
    data.value=res.data.data.records 
})
}
// 动态获取DOM高度给表单防止页面出现滚动条
onMounted(() => {
//默认值88
   TabHeight.value = TabHeight.value.offsetHeight-91;
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度
   onLoad()
})
// 新增数据功能
const AddInfo=()=>{
  console.log(111);
  AddLalog.value=true;
}
// 图片上传


const imageUrl = ref('')
// 图片上传成功回调函数
const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile) => {
  console.log(response,uploadFile,'123123123123123122312123');
}
// 上传图片规则
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/png') {
        ElMessage.error('图片格式只能为image/png!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于2MB!')
    return false
  }
  return true
}
</script>

<style scoped lang='scss'>
// 最外层 IDV
.el-content-el {
  padding: 0 8px;
  padding-top:8px;
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
// 表格顶部按钮
    :deep(.el-Cart-button) {
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
    }
    // 表格顶部左侧、右侧按钮样式
    .el-Cart-button-left,.el-Cart-button-right{
      display: flex;
      margin: 0 0px;
      justify-content: space-between;
    }
    .el-Cart-button-left{
    :deep( button){
    padding: 0 7px;
    min-width: 70px;
    display: flex;
    span{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    i{
      margin-right: 6px;
    }
    }
    }
    
    }
    .el-Cart-button-right {
    display: flex;
    margin: 0 0px;
    justify-content: space-between;
    align-items: center;
    button {
        background-color: transparent;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        margin-right: 8px;
        
        &:hover {
          background-color: #172e601f;
          i {
            color: #0e2549;
          }
        }
        // 去掉最后一个按钮右侧边距
        &:last-child {
          margin-right: 0;
        }
      }
    }
  .el-Cart {
    // 表格标题颜色
    :deep(.el-table__header) {
      th {
        background-color: #fafafa;
        color: #000;
      }
    }
    // 组件样式开始
    // 分页样式
    .demo-pagination-block {
      display: flex;
      justify-content: flex-end;
      margin-top: 6px;
    }

    // 表格行高度
    :deep(.el-table__row) {
      height: 60px;
    }
    // 表格图片
    .el-Img {
      width: 100%;
      height: 40px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 新增数据弹窗组件样式
  :deep(.addlalog){
          // 弹窗
  .el-dialog__header{
        border-bottom: 1px solid #172e607d ;
        margin-right:0;
        margin-bottom:0;
        padding-bottom:20px;
        position: relative;
        i{
          color:#172e60;
        }
  }
  // 弹窗标题左侧小竖线
  .el-dialog__header::after{
    content: "";
    display: block;
    width: 3px;
    height: 16px;
    background-color: #172e60;
    position: absolute;
    left: 8px;
    top: 24px;
  }
  .el-dialog__body{
    .el-form{
      width: 100%;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .el-form-item{
      width:276px;
      
    }
 /* 去掉第三个、第六个、第九个div的右外边距 */
.el-form-item:nth-child(3n) {
  margin-right: 0; 
}
  }

.el-form-item__content{
  height:30px;
  // 日期选择框
     .el-input{
      width: 100%;
      height:30px !important;  
     }
//  下拉选择框
    .el-select{
      width: 100%;
    }
  }

  }

  // 底部提交
  .el-dialog-button{
    display:flex;
  justify-content: flex-end;
  }
  // 图片上传
  .img-icon{
    width: 100%;
    position: relative;
    .el-button{
     width: 100%;
    background-color: #fff;
    color: #a8abb9;
    justify-content: flex-start;
    border: 1px solid #dcdfe6;
    }
    i{
      position:absolute;
      left: 110px;
      top: 8px;
      font-size:18px
    }
  }
  :deep(.upload-demo){
    width:100%;
    .el-upload{
      width:100%
    }
  }
}
</style>