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';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';

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'] = async rawFile => {
  const _nameArr = rawFile.name.split('.');

  if (_nameArr.length === 0) {
    ElMessage.warning('异常类型文件');
    return false;
  }

  const _name = _nameArr[_nameArr.length - 1];

  const _whiteArr = ['png', 'jpg', 'jpeg'];

  if (!_whiteArr.includes(_name.toLocaleLowerCase()))
    return ElMessage.warning('请上传png、jpg、jpeg的类型图片');
  const res = await compressImageBlob(rawFile);
  return res;
};
</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>